20230821 TIL

Today 요약

[✅] 프로그래머스 코딩테스트 2문제

[✅] flutter 강의 4개

---

배운 점 

1) flutter material 3

MaterialApp(
	theme:ThemeData(
    	useMaterial3 : true,
    )
)

• bottom app bar의 디자인이 다르기 때문에 아래와 같이 Container로 사용해준다
• 2에서는 bottomNavigationBar: BottomAppBar를 사용했음

Scaffold(
	bottomNavigationBar :Continaer(
    	child:...
    )
)

https://m3.material.io/components/bottom-app-bar/overview

Bottom app bar – Material Design 3

 

2) flex_color_scheme

• app 색상을 ThemeData에 일일히 적용하지 않아도 아래의 패키지를 사용시 두줄로 완성 할 수 있다

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // The Mandy red, light theme.
      theme: FlexThemeData.light(scheme: FlexScheme.mandyRed),
      // The Mandy red, dark theme.
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.mandyRed),
      // Use dark or light theme based on system setting.
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

flex_color_scheme | Flutter Package

 

3) internationalize

• app에서 사용하는 언어를 감지해 그 언어에 맞는 텍스트 - 번역

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

return const MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en'), // English
    Locale('es'), // Spanish
  ],
  home: MyHomePage(),
);

Localizations.override(
	constext, context,
    locale:const Locale("es"),
	child:Scaffold
)

• https://docs.flutter.dev/ui/accessibility-and-localization/internationalization