flutter開發(fā)初體驗

flutter目前最火的混合開發(fā)技術(shù)西潘，作為苦逼的移動開發(fā)人員了解下總是沒有錯的吗跋，針對最近自己的學(xué)習(xí)侧戴，進(jìn)行相關(guān)總結(jié)，希望在座的看官跌宛，看完此文后酗宋，能對flutter移動開發(fā)有個大概的了解，希望能給你開發(fā)flutter帶來個大體的認(rèn)知疆拘，由于學(xué)習(xí)接觸時間不過蜕猫，如有講錯的地方，請在評論區(qū)指出哎迄，謝謝丹锹；

注：經(jīng)過多重比較，個人覺得AS是比較適合flutter移動開發(fā)的芬失，集成方便楣黍，插件支持多，不虧是google大佬的親兒子棱烂，安卓開發(fā)人員過渡也比較方便租漂；

1 flutter項目結(jié)構(gòu)

在正式進(jìn)入前，首先給大家整體介紹下，項目結(jié)構(gòu)哩治，以及IDE的基本使用秃踩，由于篇幅有限，本文暫時不對dart語言進(jìn)行過多介紹业筏，有空的小伙伴可以點擊連接進(jìn)行自行查看 Dart;
不同平臺開發(fā)環(huán)境搭建也可以參考 連接憔杨，本文用的mac平臺下的as開發(fā)flutter；

1.1 flutter項目結(jié)構(gòu)介紹

項目結(jié)構(gòu)

• 程序入口lib/main.dart

在移動開發(fā)中蒜胖，我們往往都會有app程序入口這一設(shè)定消别，例如安卓的application注冊，而flutter亦是如此台谢，由于flutter開發(fā)中寻狂，全部采用的是widget來替代傳統(tǒng)的activity（頁面）這一設(shè)定，如果是安卓開發(fā)人員朋沮，我覺得將widget理解為fragment（碎片）更合理些蛇券，在main這個頁面中，我們可以指定自己的初始wiget樊拓，以及全局路由的注冊纠亚，示例如下：

程序入口指定，也可以指定為別的widget筋夏；

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  static  GlobalKey<NavigatorState> navigatorState = new GlobalKey();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    //初始化下本地數(shù)據(jù)
    Global.init();
    return Store.init(
        context: context,
        child: MaterialApp(
          title: '零壹酒店',
          navigatorKey: navigatorState,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(titleName: "首頁"),
          routes: routers,
        ));
  }
}
/// 路由器
Map<String, WidgetBuilder> routers = {
  "home": (context) {
    return new HomePage();
  },
};

• 程序環(huán)境搭建文件 pubspec.yaml

該文件的作用在于環(huán)境搭建菜枷，其實有點類似于安卓開發(fā)的gradle文件一樣，對于第三方依賴叁丧，sdk配置等都在該文件注冊，有一點需要注意的是岳瞭，圖片資源等文件的注冊也要在該文件聲明拥娄，否則會引用無效，不能正常加載出來瞳筏；

version: 1.0.0+1

environment:
  sdk: ">=2.2.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  event_bus: ^1.0.1
  dio: ^3.0.8
  crypto: ^2.0.6
  json_serializable: ^2.0.0 # 解析
  build_runner: ^1.1.2 # 解析
  transformer_page_view: ^0.1.6
  flutter_webview_plugin: ^0.3.0
  device_info: ^0.2.0
  provider: ^3.0.1+1
  shared_preferences: ^0.4.2
  flutter_color_plugin: ^0.0.2
  fluttertoast: ^3.1.0
  flustars: ^0.3.2
#  fluttie: ^0.3.0
  #lottie使用控件
#  banner_view: "^1.2.0"
#  admob_flutter: ^1.0.0-beta.5 #滑輪banner

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/animations/star.json
    - assets/emoji_shock.json
    - images/icon_action_check_in.png
    - images/icon_action_hotel.png
    - images/icon_action_mine.png
    - images/icon_user.png

• 程序主業(yè)務(wù)lib
• 原生態(tài)項目結(jié)構(gòu)ios/android
• 資源文件目錄 images/res/assets

1.2 AS基本調(diào)試

對于絕大部分開發(fā)而言稚瘾，應(yīng)用調(diào)試也是入門的一步，由于AS也是基于IntellJ開發(fā)姚炕，大部分功能都是通用摊欠，對于大部分開發(fā)者的使用門檻還是比較低的，不過我在開發(fā)中柱宦，發(fā)現(xiàn)些椒，對于ios設(shè)備調(diào)試時候，AS貌似不能很好適配掸刊，經(jīng)常性不能再ios設(shè)備進(jìn)行正常的debug免糕，也可能是我本人的用法錯誤導(dǎo)致，故而接下來的調(diào)試都以安卓設(shè)備表現(xiàn)為主。

從左往右的功能對應(yīng)：

應(yīng)用調(diào)試

• 調(diào)試設(shè)備選擇
• 調(diào)試應(yīng)用選擇
• 啟動項目run
• 項目debug

由于開發(fā)中可能要面對各種調(diào)試功能的使用石窑，每個功能點的使用又千變?nèi)f化牌芋，想要深入了解的話，可以參考功能調(diào)試

1.3 Open DevTools使用

由于寫到了應(yīng)用調(diào)試該功能松逊，個人在開發(fā)中躺屁，感覺Open DevTools（簡稱DTS）在開發(fā)中確實能給我們的調(diào)試帶來很大的便利，由于是flutter開發(fā)经宏，as自帶的profile并不能給我們記錄應(yīng)用的內(nèi)存犀暑，網(wǎng)絡(luò)，view繪制等數(shù)據(jù)的獲取烛恤，而DTS的出現(xiàn)母怜，正好可以取代以往開發(fā)中profile的位置 。
由于篇幅關(guān)系缚柏，具體的使用案例可以參考DevTools

2 什么是widget苹熏，如何正確使用理解他：

在文章開篇的時候，我有提過币喧，在flutter開發(fā)里面轨域，可謂一切界面皆是widget，對于安卓開發(fā)人員杀餐，可以理解為增強(qiáng)版fragment（碎片）干发，基本所有的和界面相關(guān)的實現(xiàn)都在當(dāng)中實現(xiàn)。

2.1StatelessWidget StatefulWidget 兩者的區(qū)別：

說到widget就必須聊到今天一個很重要的主題史翘，StatelessWidget, StatefulWidget枉长，因為大部分界面的實現(xiàn)都需要通過集成他們來實現(xiàn)界面顯示。

• StatelessWidget

沒有狀態(tài)的Widget琼讽，一般對于靜態(tài)界面必峰，不需要綁定數(shù)據(jù)的界面使用，簡單的實現(xiàn)build方法即可钻蹬。

class DemoPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(child: Text("I am 吼蚁。。问欠。肝匆。冤吨。demo"),);
  }
}

• StatefulWidget

其實就是綁定了數(shù)據(jù)的widget督函，通過單獨的state來進(jìn)行數(shù)據(jù)管理愉昆，當(dāng)數(shù)據(jù)發(fā)生變化的時候症昏，與其進(jìn)行數(shù)據(jù)綁定的widget就會進(jìn)行相關(guān)的數(shù)據(jù)刷新夷蚊，達(dá)到動態(tài)將View和model數(shù)據(jù)綁定的一種模式界赔。

class DemoStatePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return DemoStatePageState();
  }
}

class DemoStatePageState extends State<DemoStatePage> {
  String msg = "i am  demo";

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:GestureDetector(
        onTap:(){
          setState(() {
            msg="i amnot demo";
          });
        },

        child:
      Text(
        msg,
        style: CurrentTextStyle.getNormalWhiteTextStyle(),
      ), ),

    );
  }
}

3 常用wiget使用：

• Text：該 widget 可讓創(chuàng)建一個帶格式的文本譬挚。

• Row奸绷、 Column： 這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局。其設(shè)計是基于web開發(fā)中的Flexbox布局模型借浊。

• Stack： 取代線性布局 (譯者語：和Android中的LinearLayout相似)塘淑，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于Stack的上下左右四條邊的位置蚂斤。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計的存捺。

• Container： Container 可讓您創(chuàng)建矩形視覺元素。container 可以裝飾為一個BoxDecoration, 如 background曙蒸、一個邊框捌治、或者一個陰影。 Container 也可以具有邊距（margins）纽窟、填充(padding)和應(yīng)用于其大小的約束(constraints)肖油。另外， Container可以使用矩陣在三維空間中對其進(jìn)行變換臂港。

針對于flutter布局而言森枪，個人感覺最大的區(qū)別在于布局實現(xiàn)的不習(xí)慣，安卓開發(fā)中审孽，提供大量parentLayout來控制子布局的大小县袱，相對位置等屬性，flutter開發(fā)中更多的采用前端知識佑力，主軸式散，副軸概念來控制具體子widget的布局實現(xiàn)，因此對于Row和Column使用極為重要打颤。

3.1 Row Column 兩者的使用：

如果有看過Row和Column的源碼的話暴拄，你們就會發(fā)現(xiàn)，其實兩者都是繼承Flex去實現(xiàn)的编饺，可以看出乖篷，F(xiàn)lex的構(gòu)造函數(shù)就比Row和Column的多了一個參數(shù)。Row跟Column的區(qū)別反肋，正是這個direction參數(shù)的不同。當(dāng)為Axis.horizontal的時候踏施，則是Row石蔗，當(dāng)為Axis.vertical的時候，則是Column畅形。
由于篇幅限制养距，屬性的使用接受可以參考

Flex({
  Key key,
  @required this.direction,
  this.mainAxisAlignment = MainAxisAlignment.start,
  this.mainAxisSize = MainAxisSize.max,
  this.crossAxisAlignment = CrossAxisAlignment.center,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  this.textBaseline,
  List<Widget> children = const <Widget>[],
})

在使用Row和Column的時候我們，經(jīng)常會有困惑日熬，什么是主軸（main axis）棍厌，什么是交叉軸（ cross axis），通過下圖，我們就可以清楚的了解到耘纱。

row和column

注：有前端用flex開發(fā)使用的經(jīng)驗的同學(xué)敬肚，完全可以參考flex屬性使用。

3.2 其他常用layout使用:

3.2.1 Expand 束析，Positioned:

• Expand：合理的使用flex屬性艳馒，可以控制widget之間的權(quán)重比例；
• Positioned：絕對布局员寇，利用RTBL來決定widget在屏幕顯示的位置空間弄慰；

3.如何構(gòu)建自己的應(yīng)用布局

該部分講解，以實際項目為基礎(chǔ)進(jìn)行講解

3.1 布局搭建：

3.1.1 選擇自己的layout 父布局(row,column的選擇)：

3.1.2 綁定初始化數(shù)據(jù)：

4 常用第三方工具

• 全局狀態(tài)管理工具 Provider
• 本地存儲SP（sharePreferences）
• 網(wǎng)絡(luò) Dio
• json格式解析蝶锋，F(xiàn)lutterJsonBeanFactory使用