Flutter 學習：初識Flutter

 1.創建一個簡單的flutter工程

   可以參照 flutter 創建

  1.替換 lib/main.dart 裏面的內容，如下代碼，

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

 運行結果如上。注意：第一次安裝在設備上時，花費的時間會久點，下一次只需要reload就可以快速更新設備顯示

建議

1. 這是一個創建Material app的例子， Material 是一個可視化的設計語言，而flutter就是提供了一系列 Material 組件；
2. main() 方法 uses使用arrow (=>) 符號來表示一行函數.
3. 上面app 繼承 StatelessWidget ，使它本身成爲一個Widget。在Flutter, 大部分的比如   alignment, padding, and layout.都是一個Widget
4. 材料庫中的 Scaffold Widget  提供默認的應用欄，標題和包含主屏幕小組件樹的主體屬性。Widget 的主要工作是提供build（）方法，該方法描述如何根據其他較低級別小部件顯示小部件
5. 在上面的例子中，Center 包含了一個子控件Text，Center 就使得Text 內容居中顯示。

2 使用第三方包

     在這個步驟，學習如何引入第三方開源包   english_words ，實現轉化爲單詞。

     pubspec.yaml 這個文件就是flutter 管理第三方依賴的文件，我們打開這個文件 添加一行

 

name: flutter_app
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter

english_words: ^3.1.0 ，點擊上面的 Packages get 按鈕，執行完之後，打開 lib/main.dart,文件：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

  接着就開始使用這個包：

  final wordPair = WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
         // child: new Text('Hello World'),
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }

 

3.添加一個Stateful widget

 

Stateless widgets  無狀態小部件是一個小部件，它通過構建一系列其他小部件來更加具體地描述用戶界面，從而描述用戶界面的一部分。構建過程以遞歸方式繼續進行，直到用戶界面的描述完全具體

Stateful widgets 狀態( state) 是可以在構建Widget時同步讀取時 和  在Widget的生命週期期間可能改變的信息

1. 創建一個狀態類，在main.dart
2. 添加部件類
3. 實現build 函數

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

4.添加一個可以滾動的ListView

    在此步驟中，您將展開RandomWordsState以生成並顯示單詞對的列表。當用戶滾動時，ListView小部件中顯示的列表會無限增長。 ListView的構建器工廠構造函數允許您根據需要懶惰地構建列表視圖、

1. 添加 _suggestions 參數來保存單詞列表；

2. _biggerFont來控制字體大小

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

 

  3. 添加_buildSuggestions（）函數

 Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) {
          if (i.isOdd) return Divider(); /*2*/

          final index = i ~/ 2; /*3*/
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return _buildRow(_suggestions[index]);
        });
  }

 

4 _buildRow（）函數

Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

5 在RandomWordsState 這個類的build函數，調用_buildSuggestions（）來生成數據

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    final wordPair = WordPair.random();
   // return Text(wordPair.asPascalCase);
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );

  }

6.最後就是修改App類

 home: RandomWords(),