通过 Flutter 安装教程 成功在 Android Studio 安装了 Flutter。那我们就尝试使用 Android Studio 进行一些简单的尝试。
使用 Android Studio 创建Flutter项目
由于 Android Studio 一直都是Google在开发维护，所以理所当然对自家的Flutter支持是也是非常的好。
通过Android Studio安装Flutter插件，那么就可以非常方便创建Flutter应用
根据提示，即可完成创建Flutter项目，非常的简单。
目录结构分析
从初始项目的目录结构可以看到，项目有android和ios目录，这两个目录就是一个标准的Android项目和iOS项目，可以说是Flutter的宿主APP。lib目录可以看到有一个main.dart文件，这个就是flutter代码所在的目录，使用dart语言编写，dart语言也是Google开发的。再往下面有pubspes.yaml，这个文件是用来添加flutter的依赖，假设我们要引入一个库，就是需要修改这里。
简单尝试
我们把main.dart的代码删除，重现编写。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
运行项目
如果是有下载Xcode的，可以使用iOS虚拟机运行，通过命令行即可启动虚拟机
open -a Simulator
如果是Android就需要借助AVD Manager创建一个虚拟机，并运行起来即可，Android Studio/IntelliJ IDEA 的Flutter插件也可以非常方便使用，点击运行按钮，就可以运行在虚拟机上，中间输出“Hello World”。
从Android和iOS的运行可以看到，其实官方的控件在两者实现还是有一定的差别，比如iOS的标题是居中的，Android是靠左边的，而且状态栏是沉浸模式的。
布局方式
-
Row，是水平方向的线性布局（linear layout）
-
Column，是垂直方向的线性布局（linear layout）
-
Stack，可以理解成为相对布局。
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Column(
children: <Widget>[
new Text('Text 1'),
new Text('Text 2'),
new Text('Text 3')
],),),),);}
}
事件
控件是有两种区分，StatelessWidget（无状态）、StatefulWidget（有状态），有状态才能进行交互，无状态就仅仅作为显示而已。
- StatelessWidget：Icon、 IconButton,、Text等。
- StatefulWidget：Checkbox、Radio、Slider、InkWell、Form、TextField等。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyHomePageState extends State<MyHomePage> {
var clickCounter = 0;
@override
Widget build(BuildContext context) {
return new Center(
child: new RaisedButton(onPressed: () {
clickCounter++;
//setState(() {
// clickCounter++;
//});
},
child: new Text("Click Counter : $clickCounter"),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new MyHomePageState();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: MyHomePage(),
),
);
}
}
分析上述的代码，做过Android 或者 iOS开发的开发者可能会想，为何不是点击事件的时候直接setText的呢，其实Flutter是基于Canvas实现，不同Android和iOS原始是绘制完毕就不再主动重新渲染，Flutter是每一帧都会重新渲染，所以只要更改了参数即可。
跳转页面（路由和导航）
更多信息参考 Navigator API，关键代码如下：
Navigator.push(context, MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('第二个页面')),
body: Center(
child: FlatButton(
child: Text('POP'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
},
));
完成代码如下
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Center(
child: new RaisedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('第二个页面')),
body: Center(
child: FlatButton(
child: Text('POP'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
},
));
},
child: new Text("跳转"),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new MyHomePageState();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: MyHomePage(),
),
);
}
}
pubspes.yaml 添加依赖
flutter的依赖管理非常的方便，打开这个依赖管理的文件，找到dependencies这个结构，添加依赖非常简单，下面的shared_preferences: ^0.5.3就是添加依赖，后面的版本号可以不写，直接写shared_preferences:也是可以的。
dependencies:
flutter:
sdk: flutter
shared_preferences: ^0.5.3
https://pub.dev/ 这里可以搜索到很多有价值的库。
Material 组件
https://flutterchina.club/widgets/material/
Flutter提供了一整套非常强大的Material风格组件，可以帮助我们创建非常美观的UI。
Cupertino (iOS风格) 组件
Flutter框架包含了两套匹配特定设计语言的组件。称作Material Design的组件实现的是同名的谷歌设计语言，称作Cupertino的组件模仿了苹果iOS的设计。
https://flutterchina.club/widgets/cupertino/
https://api.flutter.dev/flutter/cupertino/cupertino-library.html
网友评论