Flutter platform widgets 라이브러리 문서

소개

모바일 OS에는 Android, iOS 두 개의 운영체제가 있다.
Android는 Material Design 이며 iOS는 Cupertino Design이다. Flutter platfrom Widgets 라이브러리는 두 가지의 OS를 인식하며 각기 다른 UI를 제공할 수 있게 해 준다.

각기 다른 디자인이 적용된 사진

https://pub.dev/packages/flutter_platform_widgets

flutter_platform_widgets | Flutter Package

공식문서 홈페이지

https://pub.dev/documentation/flutter_platform_widgets/latest/flutter_platform_widgets/flutter_platform_widgets-library.html

flutter_platform_widgets library - Dart API

위젯 종류

• PlatformWidget
• PlatformText
• PlatformSwitch
• PlatformSlider
• PlatformTextField
• PlatformButton
• PlatformIconButton
• PlatformApp
• PlatformScaffold
• PlatformTabScaffold
• PlatformAppBar
• PlatformNavBar
• PlatformPopupMenu
• PlatformAlertDialog
• PlatformDialogAction
• PlatformCircularProgressIndicator
• PlatformPageRoute
• PlatformPage
• ShowPlatformModalSheet
• ShowPlatformDatePicker
• PlatformProvider
• PlatformThemeData
• PlatformIcons
• PlatformWidgetBuilder

PlatformWidget

플랫폼마다 다른 위젯을 보여주고 싶을 때 사용하기에 적합하다.

PlatformWidget({
    Key? key,
    this.cupertino,
    this.material,
  }) : super(key: key);
============================================
return PlatformWidget(
  cupertino: (_, __) => Icon(CupertinoIcons.flag),
  material: (_, __)  => Icon(Icons.flag),
);

PlatformApp

Material에서 MaterialApp을 사용하거나 Cupertino에서 CupertinoApp을 사용하기 위한 최상위 위젯이다.

Android, iOS에서 각각 다른 Theme을 원할 경우 아래의 코드처럼 MaterialAppData, CupertinoAppData에서 Theme의 값을 입력하면 깔끔하게 코드를 작성할 수 있다.

PlatformApp에서 Home은 공통으로 사용하고 Android,iOS Theme을 따로 설정하는것이 맞는거 같다.

return PlatformApp(
  title: 'Flutter Demo',
  home: MyHomePage(),
  material: (_, __) => MaterialAppData(
    home: MyHomePage(),
    theme: ThemeData(
      textTheme: TextTheme(
        headline1: TextStyle(color: Colors.indigo), // headline1 스타일 값을 지정
      ),
    ),
  ),
  cupertino: (_, __) => CupertinoAppData(
    home: MyHomePage(),
    theme: CupertinoThemeData(
        primaryColor: Color(0xff127EFB),
        textTheme: CupertinoTextThemeData(
            textStyle: TextStyle(color: Colors.red))),
  ),
);
============================================
MaterialAppBarData _materialAppBar() => MaterialAppBarData(
      title: Text(
        'Material AppBar',
        style: Theme.of(context).textTheme.headline1, // 위에서 지정한 디자인 적용
      ),
    );

PlatformWidgetBuilder

플랫폼마다 다른 위젯을 설정할 수 있다.

child에 입력된 Container(~) 위젯을 각 플랫폼에서 사용할 수가 있다.

공통된 위젯을 사용할 거면 child 인자를 받아서 사용해도 되고 수정해서 사용할꺼면 플랫폼마다 다른 child에 위젯을 넣어서 사용하면 된다.

 PlatformWidgetBuilder(
   cupertino: (_, child, __) => GestureDetector(child: child, onTap: _handleTap),
   material: (_, child, __) => IniWell(child: child, onTap: _handleTap),
   child: Container(child: Text('Common text')),
 );

PlatformThemeData

Flutter에서 제공하는 기본적인 위젯에서 플랫폼별로 다른 스타일을 적용하고 싶을 때 사용하기 적합하다.

Text(
  platform.text,
  textAlign: TextAlign.center,
  style: platformThemeData(
    context,
    material: (data) => data.textTheme.headline5,
    cupertino: (data) => data.textTheme.navTitleTextStyle,
  ),
)