初めてのFlutter アプリ開発およびパッケージ紹介

# アプリ開発(Android Studio環境下の開発とする)
1. start a new Flutter project
2. Flutter application 
3. androidのネイティブアプリと同様の手順（名前作成）
4. ファイルの作成完了
5. lib file内に
 - main.dart(ソースコード)
 - pubspec.yaml(パッケージ定義)
6. ソースコードの編集が完了した場合，右矢印のrunをクリック,プログラム実行

## Flutter開発
### Hello Worldの実装
以下がHello Worldのプログラムとなる．
<project>/libs/main.dartを書き換え

```dart


import 'package:flutter/material.dart';

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

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

```

####プログラムの説明
main.dart を起動すると,main()がよばれて,MyAppインスタンスをrunApp()にわたす.

全体のViewをStatelessWidgetが司っていて，Viewをbuild.
MaterialAppがtitlebodyなどのプロパティを持っていて,
それぞれに任意のview widgetを渡すことで画面を描画している.


####構成要素
Widget:UIを構築するために使用されるクラス
Stateless Widget: 可変状態を必要としないWidget.一度描画したら変化しない
Stateful Widget: 可変状態のWidget 
Container: 余白，背景色またはその他の装飾をWidgetに追加
GridView: Widgetを2次元のリストとして配置，コンテンツが収まらない時に自動的にスクロールする．
ListView: ボックスのリストを水平または垂直に配置する．コンテンツが収まらない時は自動的にスクロールする．
stack: Widgetの上にWidgetを重ねる

Scaffold:マテリアルデザインを使用する時のWidget．
1. → Appbar: タイトル  → Text:ラベル要素
2. → Body(Center) → Text

###Dart2なら簡潔なコードに
**newやconstが不要**

```dart


import 'package:flutter/material.dart';

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

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

```


###インタラクティブにするならStatefulWidget
stateを利用して状態管理

```dart


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(title: 'Welcome to Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key , this.title}): super(key: key);
  final String title;

  @override 
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
   setState(() {
    _counter++;
   });
  }

--(省略)--
```

###コードの説明
上記のコード説明との変更点はsetState(UIの更新を検知)したら，カウンタが更新されていく．
上記のコード説明の時は，StatelessWidgetのみで，今回はStatefulWidgetが含まれている．

##Flutter Tips

###Hot Reload

 コードの変更→Saveで画面反映
 設定をあらかじめ確認（Plugins -> Flutter）
 Perform hot reload on saveにチェックしておく
 挙動がおかしくなったら,⚡︎マークをクリック

###画面の開発

 ウィジェットツリーから考える
 例） Scaffold 
    1. → AppBar → Text
    2. → Body(Container) → Columns → (Dropdown Button,Text Fild , Raised Buttonなど)

###OS別のカスタマイズ

 テーマ作成

```dart

final ThemeData iOSTheme = ThemeData(
 primarySwatch:Colors.grey,
 accentColor:Color(0xFFFF4081),
);

final ThemeData defaultTheme = ThemeData(
 primarySwatch:Colors.blue,
 accentColor:Color(0xFFFF4081),
);

```
```dart

void main()
 runApp(MaterialApp(
  title:'税込み金額',

  theme:defaultTargetPlatform == TargetPlatform.iOS
   ?iOSTheme
   :defaultTheme,
  home:TaxCalc()
 ));
}

```
###新しい機能を実現

  設定を永続化したい：Flutter Packages（プラグイン）検索
  https://pub.dartlang.org/flutter を検索

　shared_preference 0.4.1(プラグインの導入)
　
  pubspec.yamlを編集　→ Packages getをクリックすることで反映される
  
  例） import 'package:shared_preferences/shared_preferences.dart';

```dart
 saveSampleData(String value)async {
 SharedPreferences prefs = await SharedPreferences.getInstance();
 await prefs.setString('key1',value);
}
```

おすすめプラグイン
・shared_preferences
・http
・firebase
  
###複雑な画面の開発: Inspector
###ボイラープレート対策: Live Templates（開発スピードを上げるために）

 stless/stfull/stanim + [Tab] で簡単入力

###Codelabs(Flutter　実践)

https://codelabs.developers.google.com/?cat=Flutter