美文网首页
demo注释-使用 Themes 统一颜色和字体风格

demo注释-使用 Themes 统一颜色和字体风格

作者: 不泯iOS | 来源:发表于2019-11-08 17:58 被阅读0次
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final appName = 'Custom Themes';
    
        return MaterialApp(
          title: appName,
          theme: ThemeData(//定义一个全局 theme
            // Define the default brightness and colors.
            brightness: Brightness.dark,
            primaryColor: Colors.lightGreen[800],
            accentColor: Colors.deepOrangeAccent,
    
            // Define the default font family.
            fontFamily: 'Montserrat',
    
            // Define the default TextTheme. Use this to specify the default
            // text styling for headlines, titles, bodies of text, and more.
            textTheme: TextTheme(
              headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
              title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
              body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
            ),
          ),
          home: MyHomePage(
            title: appName,
          ),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      final String title;
    
      MyHomePage({Key key, @required this.title}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Center(
            child: Container(
              color: Theme.of(context).accentColor,//沿用父及Theme的accentColor样式
              child: Text(
                'Text with a background color',
                style: Theme.of(context).textTheme.title,//这里的title 是指textTheme中文本的一种呈现方式,还有很多种,具体可点进去查看。
              ),
            ),
          ),
          floatingActionButton: Theme(
            data: Theme.of(context).copyWith(
              colorScheme:
              Theme.of(context).colorScheme.copyWith(secondary: Colors.yellow),//从父级 Theme 扩展其他属性,使用 copyWith 方法即可。
            ),
            child: FloatingActionButton(
              onPressed: null,
              child: Icon(Icons.add),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:demo注释-使用 Themes 统一颜色和字体风格

          本文链接:https://www.haomeiwen.com/subject/crywbctx.html