Flutter-系列（四，阿里P8大佬整理

 primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],

),
);

**2.自定义主题**

new Theme(
// Create a unique theme with “new ThemeData”
data: new ThemeData(
accentColor: Colors.yellow,
),
);

**3.使用主题**

通过以上两种方式创建主题后，我们可以在Widget的build方法中通过Theme.of(context)函数使用主题。

new Container(
color: Theme.of(context).accentColor,
child: new Text(
‘Text with a background color’,
style: Theme.of(context).textTheme.title,
),
);

通过[ThemeData]( )文档可以查看到主题里面支持预定义的颜色
![](https://upload-images.jianshu.io/upload_images/14140248-bacd33faba5d9468.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

通过[TextTheme]( )可以查看系统预制的字体样式。例如示例中提到的theme.textTheme.title就是这个样子的：
![](https://upload-images.jianshu.io/upload_images/14140248-a1ccb42106de6edd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**SnackBar**
在Android中有Toast弹出提示这个概念，但是在Flutter中没有Toast，取而代之的是SnackBar。
![](https://upload-images.jianshu.io/upload_images/14140248-09d50640e6f5ff1a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
想要创建一个SnackBar，我们需要用到Scaffold容器，之前文章有讲过[Scaffold]( )是一个包含Material Design的容器。
![](https://upload-images.jianshu.io/upload_images/14140248-e8f73095ab12a942.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Scaffold(
appBar: AppBar(
title: Text(‘SnackBar Demo’),
),
body: SnackBarPage(), // We’ll fill this in below!
);

接下来创建一个按钮:

return Center(
child: RaisedButton(
onPressed: _showSnackBar,
child: Text(‘Show SnackBar’),
),
);

点击按钮的时候显示SnackBar:

void _showSnackBar() {
final snackBar = SnackBar(
content: Text(‘Yay! A SnackBar!’),
action: SnackBarAction(
label: ‘Undo’,
onPressed: () {
// Some code to undo the change!
},
),
);

Scaffold.of(context).showSnackBar(snackBar);

}

###二.从网络加载图片
在Flutter中直接使用Image.network就可以加载图片了

import ‘package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var title = ‘Web Images’;

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: Image.network(
      'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
    ),
  ),
);

}
}

该方法还可以直接加载GIF图片

Image.network(
‘https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true’,
);

通过placeholder属性可以增加一个占位图：

FadeInImage.assetNetwork(
placeholder: ‘assets/loading.gif’,
image: ‘https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true’,
);

值得注意的是用Image.network加载的图片并没有缓存，如果想加载图片并缓存，需要使用：

CachedNetworkImage(
placeholder: CircularProgressIndicator(),
imageUrl: ‘https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true’,
);

如果对Flutter的图片缓存策略感兴趣，请继续关注本专栏，之后的文章中我会分享给大家

###三.动画
本段只简单的介绍动画入门，之后有文章会详细介绍Flutter动画。
上篇文章说到过在Flutter中所有的东西都是Widget，包括动画也不例外，如果你想让某个Widget包含动画属性，那么你需要用AnimatedOpacity将其包裹起来，AnimatedOpacity也是一个Widget。

AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, animate to 0.0 (invisible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
);

# 学习路线+知识梳理

花了很长时间，就为了整理这张详细的知识路线脑图。当然由于时间有限、能力也都有限，毕竟嵌入式全体系实在太庞大了，包括我那做嵌入式的同学，也不可能什么都懂，有些东西可能没覆盖到，不足之处，还希望小伙伴们一起交流补充，一起完善进步。

![img](https://img-blog.csdnimg.cn/img_convert/42eed987b82240505f3aa5d9f4b9af8e.png)



> 本文在CodeChina开源项目：[Android开发不会这些？如何面试拿高薪](https://codechina.csdn.net/m0_60958482/android_p7) 中已收录，里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...

 本文在CodeChina开源项目：[Android开发不会这些？如何面试拿高薪](https://codechina.csdn.net/m0_60958482/android_p7) 中已收录，里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...

这次就分享到这里吧，**下篇见**。