[入門01]第一次寫 Flutter APP 就上手

一、前言

看到 Google I/O 釋出的影片，想必大家都想要快點了解 Dart 與 Flutter。 因為有了這兩個的結合，再也不用寫鳥鳥的HTML嵌入APP。用了一堆網頁語法，省不到時間又開發不出好的體驗的APP。
　　我認為，會寫程式的人都看得懂安裝方法，所以就不再細論如何安裝的步驟。而且全程都用 Android Studio 當範例工具。Visual Studio Code 也是很大推，我個人也是用VS來寫 Golang + Web Service + Docker 後台程式。

二、建立第一隻Flutter程式

記得在 IDE 先預裝好 Flutter 套件，不然開啟新專案時是無法選擇 Flutter 專案的。

　　

 

 建立 Flutter 專案

　　這裡要註意，因為 Flutter 的 package 限制規則，專案名程不能使用英文小寫及_(下底線)之外的文字符號。

　　到這一步，就已經有第一隻程式可以執行了。點擊手機畫面的『✚』就能計數。看到程式碼，是不是比原生的 Android 及 iOS 乾淨許多了。想到就讓人興奮起來啦(手握拳)

三、解說

程式主要的起頭程式碼在 /lib/main.dart。
定義如下：
void main() => runApp(new MyApp()); // 定義主類別

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo', // APP名稱改這裡是沒有用的 XD
      theme: new ThemeData(
        primarySwatch: Colors.blue, // Theme定義
      ),
      // title bar 名稱
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

修改APP名稱
Android:
<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="修改這裡"
    android:icon="@mipmap/ic_launcher">

iOS:
<key>CFBundleName</key>
<string>修改這裡</string>


自動產生的範例程式有點隆長，可以把
home: new MyHomePage(title: 'Flutter Demo Home Page'),
改成
home: new Scaffold(
    appBar: new AppBar(
        title: new Text('Welcome to Flutter'),
    ),
    body: new Center(
        child: new Text('Hello World'),
    ),
),


但還是建議照範例的寫法，比較正規，才不會全部擠在一起。以後程式多了、架構複雜了，也就亂了。