flutter入門配置及對比學習flutter

flutter配置環境篇

前言

使用flutter有段時間了，總有感覺flutter與ReactNative很相似，不過flutter是goodle的親兒子，所以拿着瞭解用用還是不錯，既然是環境配置篇，當然是初級入門了，不過筆者是mac系統，就用mac系統來說了…

安裝

flutter的官網環境是真友好，什麼語言什麼開發環境都是完備的文檔，大公司果然把逼格裝在前面

連接地址：https://flutterchina.club/get-started/install/

上面是官網的安裝指示，下面開始我們自己的安裝

啥安裝也不開這兩步，sdk和環境配置，主要分爲3個步驟：

1 Flutter SDK下載

• sdk下載，本人是從github中clone來的，愉快的留個"同性友好交友網站“地址：https://github.com/flutter/flutter

  ​ 這親切的ui設計風格，是不是友好的一批

  • clone地址：[https://github.com/flutter/flutter.git]

• clone一份，建議clone哈，你直接下載下來，後面總提示[not a git repository 這種錯

2 Flutter 環境變量配置

• 這個相信配置過sdk的朋友都不陌生，不過感謝黨和政府爲避免我們受到傷害，讓我們時時刻刻生活在天網之下，我們訪問Flutter有時候會受到限制，Flutter大大給我們搭建了臨時鏡像

  • 打開命令行： 打開 ~/.bash_profile文件 添加如下內容

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

  • 添加剛纔clone的flutter的工具bin地址進環境變量中

    export PATH=/Users/lichenxing/Documents/work/flutter/bin:$PATH
    

  • 最後一步：Esc -> :wq! 保存，然後 source ~/.bash_profile使其生效

• 終於到了見證奇蹟的時刻

  • 運行 flutter doctor，出現如下圖案即是成功

  • 再往下翻會看到如下圖，這裏是檢測你電腦上開發工具中缺少插件，可以看到筆者的AndroidStudio/XCode/VSCode…等等這些都缺少一些東西，不過我的Intellij IDEA是好使的，因爲我目標就是在IDEA上開發，而不是剛纔的那些工具，所以不必害怕出錯

注意這裏flutter doctor是安裝所有環境所以會檢測XCode，如果只想安裝Android或IOS只需要在後面添加自己想安裝的環境即可

egs：flutter doctor –android-licenses 即可

至此flutter的環境安裝就結束了，接下來我們從一個flutter的demo項目來初步瞭解下

Flutter嚐鮮

• 打開工具，筆者這裏是使用IDEA使用，創建一個flutter項目
  

  這裏就是我們flutter的sdk位置，接着下一步會有很多選項供我們選擇：
  

  我們可以選擇java->OC/也可以kotlin->swift就說跨平臺確實比ReactNative人性化一些，😂😂😂
  finish後，就完成了flutter項目的創建，我們先看下它的目錄結構：
  
  我們可以看到在工程目錄裏不僅有android也有ios，還有一個lib文件，我們在開發工具中打開看看：
  
  這裏lib下的main.dart就是我們入口文件，與RN的入口很相似，其的主函數main() 就是我們的項目入口，我們運行起來我們的第一個flutter項目完美運行

第一個Dart文件分析

入口

void main() => runApp(MyApp());
這裏就是我們dart文件的入口函數，也是工程的入口
Android可以理解爲：
<intent-filter>
   <action android:name="android.intent.action.MAIN" />
		<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
java可以理解爲：
springApplication.run()

主體

上面的runApp內有一個實體myApp()這個部分，其實這就是我們頁面的主體

咱們先把主體代碼貼出來：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //app名稱
      title: 'Flutter Demo',
      //app的主體
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //填充頁面的主體
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

請留意這裏的MyApp在我們的main()方法處罰調用，這裏的widget就幫我們聲明瞭一個MaterialApp，這裏就直接展示了我們app的名字，以及主題，還有就是我們主體頁面的部分MyHomePage

• 真實頁面主體MyHomePage

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
  
    final String title;
  
    @override
    _MyHomePageState createState() => _MyHomePageState();
  }
  

  這個homepage相對簡單，但是藉助了StatefulWidget實現了控件的狀態保存，怎麼理解呢？，我這裏借用vue的Vuex來理解這個StatefulWidget，就是處理一些業務的狀態的處理

最後的大招 _MyHomePageState

既然是大招，就好好來領略領略，其代碼如下,由於是大招，我分成兩部分介紹，一部分是剛纔我們說的狀態管理實現，另一部分是頁面的實現

• 狀態管理

  class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;
  
    void _incrementCounter() {
      setState(() {
        _counter++;
      });
    }
  }
  
  這裏存放了狀態counter，用於記錄當前頁面增加的數字狀態管理
  

• 頁面實現

  接下來就要隆重的分析這個build(BuildContext context)這個函數的作用，它就決定了我們頁面的長相，其實就相當於Android的layout文件

  @override
   Widget build(BuildContext context) {
      return Scaffold(
        //首先放了一個Appbar，就是頁面的titleBar上展示
        appBar: AppBar(
          title: Text(widget.title),
        ),
        //這一部分就是主體頁面實現，Center包含就是下面這些控件皆居中顯示，內部有兩個子控件Text，第一個text文本信息是'You have pushed the button this many times‘，第二個text文本信息是呈現狀態記錄屬性的值也就是上面counter的值
        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.display1,
              ),
            ],
          ),
        ),
        //接着擺放一個floatingActionButton，點擊時操作狀態管理，子控件的圖標放了一個add的圖標
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      );
    }
  

到這裏，一個頁面的構建也就結束了，flutter就長這樣，感覺也就這樣吧😂😂😂