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

アプリ開発(Android Studio環境下の開発とする)

1. start a new Flutter project
2. Flutter application
3. androidのネイティブアプリと同様の手順（名前作成）
4. ファイルの作成完了
5. lib file内に

• main.dart(ソースコード)
• pubspec.yaml(パッケージ定義)

1. ソースコードの編集が完了した場合，右矢印のrunをクリック,プログラム実行

Flutter開発

Hello Worldの実装

以下がHello Worldのプログラムとなる．
/libs/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: '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が不要

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を利用して状態管理

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別のカスタマイズ

テーマ作成

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

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

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';

 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　実践)