您的位置: 赤峰在线 > 消费 > 正文

Google Flutter 主题使用教程,Android iOS 可运行 建议收藏

2020-03-29 11:30:33来源:阅读:-

本头条核心宗旨

欢迎来到「技术刚刚好」作者,「技术刚刚好」是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。

技术刚刚好经历

近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。希望跟大家一起学习,一起进步!

本文核心要点

Theme Widget可以为Material APP 定义主题数据(ThemeData),Material组件库里很多Widget都使用了主题数据,如导航栏颜色、标题字体、Icon样式等。Theme内会使用InheritedWidget来为其子树Widget共享样式数据。

DEMO

main.dart文件解说

import 'package:flutter/material.dart';void main() {  runApp(MaterialApp(    debugShowCheckedModeBanner: false,    home: MyHome(),    // Set the theme's primary color, accent color,    //这段代码是关键    theme: ThemeData(      primarySwatch: Colors.green,//设置颜色      accentColor: Colors.lightGreenAccent,//      // Set background color      backgroundColor: Colors.black12,    ),  ));}class MyHome extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      // AppBar      appBar: AppBar(        // AppBar Title        title: Text("Using Theme"),      ),      body: Container(        // Another way to set the background color        decoration: BoxDecoration(color: Colors.black87),        child: Center(          child: Container(            // use the theme accent color as background color for this widget            color: Theme.of(context).accentColor,            child: Text(              'Hello World!',              // Set text style as per theme              style: Theme.of(context).textTheme.title,            ),          ),        ),      ),      floatingActionButton: Theme(        // override the accent color of theme for this widget only        data: Theme.of(context).copyWith(          colorScheme:              Theme.of(context).colorScheme.copyWith(secondary: Colors.pinkAccent),        ),        child: FloatingActionButton(          onPressed: null,          child: Icon(Icons.add),        ),      ),    );  }}

primarySwatch

flutter的主题(build下面的theme)中有个主题颜色(primarySwatch):

目前的主题颜色(primarySwatch)只有下面几个值可以选择,其他的暂不支持:

red,

pink,

purple,

deepPurple,

indigo,

blue,

lightBlue,

cyan,

teal,

green,

lightGreen,

lime,

yellow,

amber,

orange,

deepOrange,

brown,

blueGrey,

如果我要把主题色改成白色,或者黑色的话,用上面的就会报错啦,因为在primarySwatch中的颜色是调用 MaterialColor这种颜色类,内部会有一个主色,一个map存储固定的几种主色周边的颜色。

primaryColor:如果要把顶部导航栏和状态栏的颜色修改成黑色或者白色,需要用到这个属性:


谢谢观看技术刚刚好的文章,技术刚刚好是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。

推荐阅读:叶紫网

滚动推荐
30:33Google Flutter 主题
// Set the themes primary color, ac[详细]
01:16这6个高质量神器,非常棒!可以充实
本期为大家安利6个高质量的神器,每一个属于非常强大的App,保证你没见[详细]
33:17短视频日榜(2.3)| 疫情内容成
1.拼多多上线短视频板块春节假期间,拼多多上线了名为“多多视频”短视频[详细]
06:28运营复盘:在线教育产品,少儿英语的
本文作者从自己的工作出发,结合实际的运营案例来分享,如何通过运营,让在[详细]
40:21​互联网金融:新的信用,更高的效率
我今天想借1万,愿意给8%年化利率,10天还,按天计息。怕我不还钱,微[详细]
14:41企业微信和钉钉如何帮助企业完成业务
OA层面和CRM层面。OA层面上的数字化钉钉已经完成。一个企业最具生命[详细]
49:49智能家居暗藏危机,需警惕窃听陷阱
早在第二次世界大战后,计算机化的机器就已经问世,这是AI的前身。近几年[详细]