目标:
1)配置Flutter开发环境
2)创建第一个Flutter Demo项目
Flutter中文开发者网站:
https://flutter.cn/
一、配置Flutter开发环境
Flutter开发环境已经提供集成IDE开发环境,因此需要配置开发环境的时候,可以借助IDE。
1.1 下载flutterSDK
1.1.1 下载flutterSDK
可以使用git同步下载flutter SDK
git clone https://github.com/flutter/flutter.git
1.1.2 添加配置环境
配置flutter的环境变量
# Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export FLUTTER_HOME=/Users/$(whoami)/IDES/flutter
export PATH=/opt/local/bin:$GRADLE_HOME/bin:$JAVA_HOME/bin:$FLUTTER_HOME/bin:$NDK_HOME:$NDK_HOME/build:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH:
执行 flutter devices查看flutter的安装是否成功。
appledeMacBook-Pro:etc zhouronghua$ flutter devices
┌─────────────────────────────────────────────────────────┐
│ A new version of Flutter is available! │
│ │
│ To update to the latest version, run "flutter upgrade". │
└─────────────────────────────────────────────────────────┘
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.94
1.1.3 IDE集成Flutter
Android Studio安装Flutter相关插件,主要有:Dart(Flutter指定编程语言)、Flutter.dev插件。
安装成功重启,重启后,Projects-->New Flutter Project
出现Flutter项目菜单。
二、创建第一个Flutter项目
2.1 创建第一个Flutter项目
创建Flutter项目,选择Flutter菜单。
New Project->Flutter-->Next
然后点击 Next,创建一个Flutter项目
点击创建的时候,会弹出提示,模块名不正确,需要采用dart的命名方式,小写+下划线。
修改项目名为小写+下划线,创建项目。
创建项目成功,IDE会自动初始化项目信息。
2.2 项目结构分析
|-.dart_tool dart依赖配置
|-.idea IDEA ItellJ配置
|-android[flutter_world_android] 安卓平台端
|-ios IOS平台端
|-windows Windows平台端
|-lib 跨平台库
|-web 资源
|-test 测试程序
2.3 运行项目
选择一个平台设备,然后点击运行,开始将项目安装到指定平台。
在页面中添加一个Text,
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
// 新增一个自定义的Text
Text(
"我是来自地球村的Flutter新手"
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
重新运行后,显示新的页面