Flutter iOS처럼 디자인하고 동작하게 만들기 - Cupertino

iOS에서 Flutter로 넘어오면서 계속 느끼는건 이 구린 디자인이다. 

사실 안드 기본 디자인이 너무 별로다

투박하고 옛날 느낌이 난다. 약 15년전 감성이랄까. 

취향차이니깐 괜찮다. 

그리고 우선 기본 골조만 다르게 잡으면 내부 위젯은 공유하면서 사용하면 된다. 

즉 초기 분기 부분이 귀찮다. 

우선 Platform을 확인 해야 한다. 

iOS인지 아닌지에 따라 Cupertino or Material 을 사용하면 된다. 

final TargetPlatform platform = Theme.of(context).platform;

return platform == TargetPlatform.iOS
    ? CupertinoApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Home(),
        ),
      )
    : MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Home(),
        ),
      );

 

그런후 

iOS 라면 CupertinoPageScaffold를 사용하면 된다. 

  Widget _buildCupertinoNavigationView(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('iOS 스타일 네비게이션'),
      ),
      child: Center(
        child: CupertinoButton(
          child: Text('Go to Page2'),
          onPressed: () {
            Navigator.of(context).push(
              CupertinoPageRoute(
                builder: (BuildContext context) => NextPage(),
              ),
            );
          },
        ),
      ),
    );
  }

 

AOS라면 원래 사용하던 Scaffold를 사용하면 된다. 

Widget _buildAndroidNavigationView(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('안드로이드 스타일 네비게이션'),
      ),
      body: Center(
        child: Text('Hello Android!'),
      ),
    );
  }
}

 

사실 분기하는게 너무 귀찮다. 

그래서 애초에 개발을 시작할 때 분기를 잘하고 모듈화를 잘 시켜야 한다. 

아니면 노가다를 하거나 코드를 갈아엎어야 한다. 

뭐, 알고 싶지 않았던 걸 알게되었다. ㅎ ㅎㅎ

 

하여튼 나는 아래와 같은 네비게이션 뷰를 만들고 싶었다. 

 

하지만 코드를 빌드하면 나오는건 

 

오마이,, 

 

아래는 전체 코드이다. 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final TargetPlatform platform = Theme.of(context).platform;

    return platform == TargetPlatform.iOS
        ? CupertinoApp(
            debugShowCheckedModeBanner: false,
            home: Scaffold(
              body: Home(),
            ),
          )
        : MaterialApp(
            debugShowCheckedModeBanner: false,
            home: Scaffold(
              body: Home(),
            ),
          );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final TargetPlatform platform = Theme.of(context).platform;

    return platform == TargetPlatform.iOS
        ? _buildCupertinoNavigationView(context)
        : _buildAndroidNavigationView(context);
  }

  Widget _buildCupertinoNavigationView(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('iOS 스타일 네비게이션'),
      ),
      child: Center(
        child: CupertinoButton(
          child: Text('Go to Page2'),
          onPressed: () {
            Navigator.of(context).push(
              CupertinoPageRoute(
                builder: (BuildContext context) => NextPage(),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildAndroidNavigationView(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('안드로이드 스타일 네비게이션'),
      ),
      body: Center(
        child: Text('Hello Android!'),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('NextPage'),
      ),
      child: Center(
        child: CupertinoButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

 

다음은 진짜 iPad split view를 구현해보려고 한다.