flutter 安装
1、设置环境变量
sudo vi ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
:wq
2、下载flutter 放到 ~/flutter
3、在~/.bash_profile设置环境变量
export PATH=~/flutter/bin:$PATH
4、运行 source $HOME/.bash_profile 刷新当前终端窗口。
source $HOME/.bash_profile
5、验证“flutter/bin”是否已在PATH中：
echo $PATH
6、检查安装依赖
flutter doctor
flutter 添加json解析
在pubspec.yaml中添加
dependencies:
json_annotation: ^2.4.0
dev_dependencies:
json_serializable: ^3.1.0
build_runner: ^1.6.4
运行
flutter packages pub run build_runner build
vscode 中添加调试控制台和终端清除快捷键
按住Ctrl+Shift+P组合按钮打开设置窗口，输入>open keyboard Shortcuts File,在里面输入
{
"key": "ctrl+k",
"command": "workbench.action.terminal.clear",
"when": "terminalFocus"
},
{
"key": "ctrl+i",
"command": "workbench.debug.panel.action.clearReplAction",
"when": "inDebugRepl"
}
flutter json 在线转换
https://javiercbk.github.io/json_to_dart/
https://caijinglong.github.io/json2dart/index.html
flutter Widget保活
Flutter提供了混入类AutomaticKeepAliveClientMixin，重载wantKeepAlive即可
flutter 字符串转颜色
Color(int.parse('0xffffffff'))
边框圆角
PhysicalModel(
color: Colors.transparent,
borderRadius: BorderRadius.circular(6),
clipBehavior: Clip.antiAlias,
child: null,
);
设置状态栏颜色
AnnotatedRegion(
value: navAlpha > 0.5 ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light,
child:Container()),
)
显示隐藏控件Offstage
/**
* 控制child是否显示
*
当offstage为true，控件隐藏； 当offstage为false，显示；
当Offstage不可见的时候，如果child有动画等，需要手动停掉，Offstage并不会停掉动画等操作。
const Offstage({ Key key, this.offstage = true, Widget child })
*/
设置underline焦点和非焦点情况下颜色
Theme(
data: Theme.of(context).copyWith(
primaryColor: Color(0xff0C8EE9),//有焦点情况下颜色
hintColor: Color(0xffE1E1E1),//没有焦点情况下下划线颜色
inputDecorationTheme: InputDecorationTheme(
hintStyle: TextStyle(color: Color(0xffC5C5C5), fontSize: 18),
),
),
child: Form(
autovalidate: true,
child: Column(
children: <Widget>[
TextField(
controller: _unameController,
focusNode: node1,
textInputAction: TextInputAction.done,
decoration: InputDecoration(hintText: '请输入工号',
),
style: TextStyle(
color: Color(0xff4A4A4A),
fontSize: 18,
fontFamily: 'PingFangSC-Medium',
),
),
TextFormField(
controller: _passwordController,
focusNode: node2,
textInputAction: TextInputAction.done,
decoration: InputDecoration(hintText: '请输入密码'),
style: TextStyle(
color: Color(0xff4A4A4A),
fontSize: 18,
fontFamily: 'PingFangSC-Medium',
),
),
],
),
),
);
设置listview背景
//方法1
class MainWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.red,
),
home: WelcomeRoute(),
);
}
}
//方法2
new Container(
color: const Color(0xFF00FF00),
child: ListView ...
多个动画串联在一起使用Interval
///
/// Definition of the _controller with a whole duration of 10 seconds
///
AnimationController _controller = new AnimationController(
duration: const Duration(seconds: 10),
vsync: this
);
///
/// First animation that moves the ball from the left to the center
///
Animation<Offset> moveLeftToCenter = new Tween(
begin: new Offset(0.0, screenHeight /2),
end: new Offset(screenWidth /2, screenHeight /2)
).animate(
new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.0,
0.20,
curve: Curves.linear,
),
),
);
///
/// Second animation that moves the ball from the center to the top
///
Animation<Offset> moveCenterToTop = new Tween(
begin: new Offset(screenWidth /2, screenHeight /2),
end: new Offset(screenWidth /2, 0.0)
).animate(
new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.20,
0.50,
curve: Curves.linear,
),
),
);
///
/// Third animation that will be used to change the opacity of the ball to make it disappear
///
Animation<double> disappear = new Tween(begin: 1.0, end: 0.0)
.animate(
new CurvedAnimation(
parent: _controller,
curve: new Interval(
0.50,
1.0,
curve: Curves.linear,
),
),
);
本地加载json文件
DefaultAssetBundle.of(context)
.loadString("resource/my_date.json")
.then((loadString) {
List data = jsonDecode(loadString);
setState(() {
models = List.from(data);
});
}).catchError((e){
print(e);
});
final和const
如果您从未打算更改一个变量，那么使用 final 或 const，不是var，也不是一个类型。 一个 final 变量只能被设置一次，两者区别在于：const 变量是一个编译时常量，final变量在第一次使用时被初始化。被final或者const修饰的变量，变量类型可以省略，如：
//可以省略String这个类型声明
final str = "hi world";
//final String str = "hi world";
const str1 = "hi world";
//const String str1 = "hi world";
flutter添加整个文件夹下图片
文件夹下必须有一倍图片否则无法加载
asset在pubspec文件对齐方式
image.png
图片圆角
剪裁Widget 作用
ClipOval 子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆
ClipRRect 将子组件剪裁为圆角矩形
ClipRect 剪裁子组件到实际占用的矩形大小（溢出部分剪裁）
ClipOval(child: avatar), //剪裁为圆形
ClipRRect( //剪裁为圆角矩形
borderRadius: BorderRadius.circular(5.0),
child: avatar,
),
flutter icons 名称
flutter教程博客
Flutter中文网
Flutter for React Native 开发者
Flutter实战
Fluttet教程
外国某大神写的博客
How to handle screen transitions in Flutter
网友评论