Help us understand the problem. What is going on with this article?

Flutterを始めたいメモ

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

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

【Flutterの基礎】
Flutterの基礎
Flutter はじめの一歩

参考を色々読みながら公式チュートリアルの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,//フォントサイズの指定
      ),
    );
  }
}

frtklog
全然関係ない業界から心機一転転職してIT業界に来ました。Angular,Flutterを少しずつお勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away