flutter 主题配置

Fork Me On Github

ThemeData

dart
                                                                   
ThemeData({
    Brightness brightness, 
    VisualDensity visualDensity, 
    MaterialColor primarySwatch,               //备用主题颜色,如果没有设定primaryColor就使用该颜色
    Color primaryColor,                         //主题主色,决定导航栏颜色
    Brightness primaryColorBrightness, 
    Color primaryColorLight, 
    Color primaryColorDark, 
    Color accentColor,                          //主题次级色,决定大多数Widget的颜色,如进度条、开关等。
    Brightness accentColorBrightness, 
    Color canvasColor, 
    Color scaffoldBackgroundColor, 
    Color bottomAppBarColor, 
    Color cardColor,                             //卡片颜色
    Color dividerColor,                          //分割线颜色
    Color focusColor, 
    Color hoverColor, 
    Color highlightColor, 
    Color splashColor, 
    InteractiveInkFeatureFactory splashFactory, 
    Color selectedRowColor, 
    Color unselectedWidgetColor, 
    Color disabledColor, 
    Color buttonColor, 
    ButtonThemeData buttonTheme,                     //按钮主题
    ToggleButtonsThemeData toggleButtonsTheme, 
    Color secondaryHeaderColor, 
    Color textSelectionColor, 
    Color cursorColor, 
    Color textSelectionHandleColor, 
    Color backgroundColor, 
    Color dialogBackgroundColor,                       //对话框背景颜色
    Color indicatorColor, 
    Color hintColor, 
    Color errorColor, 
    Color toggleableActiveColor, 
    String fontFamily, 
    TextTheme textTheme,                              // 字体主题,包括标题、body等文字样式
    TextTheme primaryTextTheme, 
    TextTheme accentTextTheme, 
    InputDecorationTheme inputDecorationTheme, 
    IconThemeData iconTheme, 
    IconThemeData primaryIconTheme, 
    IconThemeData accentIconTheme, 
    SliderThemeData sliderTheme, 
    TabBarTheme tabBarTheme, 
    TooltipThemeData tooltipTheme, 
    CardTheme cardTheme, 
    ChipThemeData chipTheme, 
    TargetPlatform platform, 
    MaterialTapTargetSize materialTapTargetSize, 
    bool applyElevationOverlayColor, 
    PageTransitionsTheme pageTransitionsTheme, 
    AppBarTheme appBarTheme, 
    BottomAppBarTheme bottomAppBarTheme, 
    ColorScheme colorScheme, 
    DialogTheme dialogTheme, 
    FloatingActionButtonThemeData floatingActionButtonTheme, 
    NavigationRailThemeData navigationRailTheme, 
    Typography typography, 
    CupertinoThemeData cupertinoOverrideTheme, 
    SnackBarThemeData snackBarTheme, 
    BottomSheetThemeData bottomSheetTheme, 
    PopupMenuThemeData popupMenuTheme, 
    MaterialBannerThemeData bannerTheme, 
    DividerThemeData dividerTheme, 
    ButtonBarThemeData buttonBarTheme})
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

使用

dart
 
Theme.of(context).primaryColor
1

配置

main.dart

dart
                            
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shop',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        secondaryHeaderColor: Color(0x05a6b1),
        indicatorColor: Color(0xFFB4282D),
        backgroundColor: Color(0xF4F4F4),
      ),
      home: IndexPage(),
    );
  }
}
12345678910111213141516171819202122232425262728
点击查看全文
0 658 0