1. 简介
flutter是谷歌在2017年推出的移动端跨平台，高性能移动应用框架。其是通过dart语言进行开发。
主要功能：跨平台，支持iOS，安卓，web。开发中支持热重载，提高开发效率。
不支持功能：热更新。
2. mac安装步骤
- 在github上面下载flutter SDK, 放大本地指定文件夹。例如 "~/Library/flutter"
- 在 "vim ~/.bash_profile" 或者"vim ~/.zshrc"中添加flutter配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Library/flutter/bin:$PATH
- 配置Java环境，在 "vim ~/.bash_profile" 或者"vim ~/.zshrc"中添加Java环境。
JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_301.jdk/Contents/Home"
export JAVA_HOME
CLASS_PATH="$JAVA_HOME/lib"
PATH=".$PATH:$JAVA_HOME/bin"
- 下载xcode和Android studio编译器
- 运行 "flutter doctor", 有错误的话，区网上搜索解决一下
- android studio中，通过 "Preference" => "Plugins" 下载dart和flutter插件。
3. 简单例子
使用android studio创建 "Create New Flutter Project"，并且选择Flutter App，按照下一步选择项目路径和语言，完成即可。
-
新项目框架如图：
新项目架构
主要逻辑都是在lib文件夹里面编写。主文件是lib/main.dart文件。
- 初始项目包含一个计数器的项目，功能是通过点击界面浮动按钮，获取点击次数。通过项目可以简单了解一下flutter语法。
// 主程序入口
void main() {
runApp(MyApp());
}
// 创建一个StatelessWidget页面。
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 主题主色调，具体theme后期会介绍。
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
// 常量，final常量可以后期赋值一次。const需要声明时赋值。
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
// 私有方法
void _incrementCounter() {
// 状态改变，通过setState，状态更新，页面刷新
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// 常用页面布局
return Scaffold(
// 导航栏
appBar: AppBar(
title: Text(widget.title),
),
body: Center( // 页面显示
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
4. 项目介绍
- 此项目分为iOS和android两个移动端展示，如果需要在iOS端运行，需要先使用xcode进入iOS项目，选择好开发者证书，设置好Bundle Identifier。
- *pubspec.yaml文件时项目配置信息，主要是设置项目名称，版本号，描述等。可以设置flutter的环境。
dependencies:
flutter:
sdk: flutter
# 添加第三方框架
# 设置资源文件，图片
# 需要在根目录下面添加**images/**文件夹
assets:
- images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
5. 常用架构介绍
本人学习时根据自己思想设置架构，仅供参考。
flutter开发架构
- util: 常用的工具类，例：date时间转换， 正则表达式验证等共有方法。
- api: dio网络请求封装。
- base: 基础依赖，例如：全局时间状态设置。scheme。 provider状态设置。
- common: 全局设置公有数据。登录信息，config, global全局配置， 网络请求数据设置基础数据等。
- routes: 页面路由设置。
- sences: 页面显示，根据模块展示mvvm模式。
- webView：设置网页跳转公有webView。
flutter初学总结，如有什么问题，欢迎评论指出。
网友评论