第一个flutter app

355 阅读3分钟

(一)创建一个Flutter app 名字为flutter_first_app,使用的命令为 flutter create flutter_first_app

创建成功之后,根据提示进入到flutter_first_app文件夹里面 cd flutter_first_app,然后运行flutter run命令如果没有连接手机,会显示如下提示

显示web设备,是因为开启了flutter web开发功能,运行命令flutter channel,显示如下

如果连接一个Android或者IOS手机,再次运行flutter run,会默认运行在Android或者IOS设备上面

如果由多个Android或者IOS设备,想运行在指定的的Android或者IOS设备上面,可以先运行指令 flutter devices,会列举出来所有的设备信息,结果如下图

然后再运行命令 flutter run -d 设备标识符,比如 flutter run -d 46FDU19430014213,运行成功如下图

(二)使用命令 code ./ 使用VSCODE打开创建的应用程序,默认包含flutter官方包含的计数器的例子,删掉原来的代码,重新写一个简单的Hello Flutter

1,首先是flutter 运行程序的入口函数main函数

在main函数中要执行函数runApp,runApp要接受一个参数 Widget,这个Widget就是显示的第一个页面的根

2,创建一个Widget 简单继承StatelessWidget,代码如下

简单说明下StatelessWidget继承自Widget,StatelessWidget 是一个抽象类,定义如下图

它包含一个抽象方法,子类要实现这个抽象方法,参数包含一个BuildContext,返回一个Widget

重写build方法,返回MaterialApp,这个是仿照Google在Android上面设计的Material风格,里面包含了丰富的组件,比如说,Scaffold,BottomNavigationBar,Scrollview等, 使用Material风格的过程中,首先要在pubspec.yaml文件中添加引用,如图所示

然后再使用到的dart文件中引用 import 'package:flutter/material.dart';

Flutter还设计了一套ios风格的组件cupertino,同样在pubspec.yaml中添加引用,如图所示

然后再使用到的dart文件中引用 import "package:flutter/cupertino.dart"

Flutter还设计了一套普通的Widget,组件比较少,需要的style需要自己设计

简单解释下MaterialApp的几个属性 title表示,切换多任务时,现实的标题 theme表示工程采用的主题样式,home表示首页,这里赋值为MyHomePage,MyHomePage如下图所示

简单解释下Scaffold组件,翻译中文是脚手架,它定义了自己的结构,简单分为三部分header AppBar 内容body接受一个组件,底部bottomNavigationBar,使用起来,只用设置相应的组件就可以实现一个页面 AppBar相当于Android上面的 ActionBar或者ToolBar,相当于IOS的UIToolbar, 内容body相当于Android中的setContentView方法中的参数View,IOS中的View,底部bottomNavigationBar,相当于Android中的 bottomNavigationBar, IOS中的NavigationBar,所以在开发中,经常会用到Scaffold,它定义好了Widget 的布局结构,用起来非常的方便。

我也在学习Flutter,内容比较简单,如有错误之处,还请指出纠正,知识在一天一天的积累,相信自己。