Flutterを始めたいメモ #Flutter

導入やチュートリアルで参考にしたわかりやすかったところを紹介

【チュートリアル】
公式 Flutter
[Flutter]最初のFlutterアプリを作るpart1-ドキュメント翻訳
 無限スクロールListView

参考を色々読みながら公式チュートリアルのPart1に
自分なりに噛み砕いた解釈をコメントで入れたソースが以下


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

void main() => runApp(MyApp());
//アプリが実行されたらまずmain()が呼ばれる
//runApp()で根元のWidgetを指定

class MyApp extends StatelessWidget {
  //StatelessWidgetはbuildメソッドを持ち、Widgetもしくはテキストを返す
  //buildメソッドでUI構築に必要なWidgetを組み合わせて組んだWidgetツリーをreturnで返す

  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Start up Name Generator', home: RandomWords());
    //MaterialApp…デザインを簡単にしてくれるクラス
    //title…タイトル文字 無くても動いた。
    //home…画面下部のコンテンツ　アプリケーションが表示されたとき最初に表示される
    //MaterialAppはStatefulWidget
  }
}

class RandomWords extends StatefulWidget {
  //スクロールする度ワードが増えるので動的なUI StatefulWidget
  //StatefulWidgetはbuildメソッドを持たず、createStateメソッドを持ち、これがStateクラスを返す
  @override
  RandomWordsState createState() => RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  //StatefulWidgetの実体
  //Stateの役割…状態の保持・更新、buildメソッドでWidgetツリーを返す

  //クラスのフィールド
  final List<WordPair> _suggestions = <WordPair>[];//単語のペアを保存する配列
  final TextStyle _biggerFont = const TextStyle(fontSize: 18);//フォントサイズの指定

  @override
  Widget build(BuildContext context) {
    //Scaffold ページの根元,マテリアルデザインの土台
    return Scaffold(
      appBar: AppBar(
        //上部に表示されるナビゲーションバー
        title: Text('Start up Name Generator'),
      ),
      body: _buildSuggestions(), //ページの中身
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16), //パディング
        //四方それぞれ指定したい時の書き方は
        //EdgeInsets.only(top: 16.0, right: 16.0, bottom: 16.0, left: 16.0)

        itemBuilder: (BuildContext _context, int i) {//iは行番号
          if (i.isOdd) {//リストの奇数行の時
            return Divider();//仕切り線のウィジェット
          }
          //以下偶数の時の処理
          final int index = i ~/ 2;
          //iは仕切り線とワードの数が一緒に数えられている数なので
          //indexにワードの数だけを書き出す
          if (index >= _suggestions.length) {//_suggestions…フィールドで宣言されたリスト
            //リストの最大数まで表示したらリストを10個増やす
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);//
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(//リストの内容の指定
      title: Text(
        pair.asPascalCase,//asPascalCase…単語のペアを文字列として返す
        style: _biggerFont,//フォントサイズの指定
      ),
    );
  }
}