最初のFlutter app、最初のセクションの作成

これはFlutter appを作成するガイドで、オブジェクト向けの言語を熟知すれば簡単に完成できます.ダートの経験はいらない
このガイドは2つの部分に分かれていて、codelabで見つけることができます.https://codelabs.developers.google.com/
1.Flutter appイニシエータの作成
2.追加パッケージの使用
3.ステータスのコントロールを追加
4.無限スクロールのListViewを作成
最初の部分でやることは
会社や名前などの情報を含むモバイルappが実現される.スクロールリストを実現する.図略
学習できること:
どのように1つを書いてandroidとiosの上でローカライズFlutter appを見ています.
Flutter appのインフラストラクチャ
パッケージの検索と使用
ホットロードを使用して迅速に開発
ステータスのあるコントロールを実装する方法
無限スクロールの怠け者のリストを作成する方法
 
1.Flutter appの作成
テンプレートに基づいて、簡単なFlutter appを作成し、https://flutter.io/get-started/test-drive/#create-appガイド名前をstartup_に変更namer.
lib/mainを編集します.dart
置換内容は次のとおりです.

import 'package:flutter/material.dart';

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

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

実行、https://flutter.io/get-started/codelab/images/android-hello-world-frame.png、効果の表示
ヒント:
この例では、可視化された設計言語であるMaterial appを作成する.モバイルとweb規格に基づく.Flutterは多くのMaterialコントロールを提供しています.
メインメソッド、の=>オペレータは、メソッドの行であることを示します.
appはStatelessWidgetから継承され、それ自体がコントロールであり、Flutterではすべてのものがコントロールである.位置、補白、レイアウトを含む.
MaterialライブラリのScaffoldコントロールは、デフォルトの画面内のタイトル、内容を提供します.コントロールサブツリーは非常に複雑です.
1つのコントロールの主な仕事はbuild()方法を提供することである.コントロールの表示方法について説明します.
この例のようなコンテンツ部分は、テキストボックスのサブコントロールを含む中央のコントロールである.中央のコントロールで、サブツリーの内容を画面に表示します.
 
2.追加パッケージの使用
このステップでは、オープンソースのパッケージenblishの使用を開始します.wordsは、数千のよく使われる英語と方法を含んでいる.
可以在https://pub.dartlang.org/flutter/あるいは他のオープンソースパッケージのサーバのように、このパッケージが見つかります.
pubspecファイルはこれらのFlutter appの依存を管理している、pubspec.yaml依存に英語を追加

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

asで見てPackages getをクリックすると、パッケージがプロジェクトにインポートされます.コンソールに表示されます

> flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

Packages getを実行するとpubspecも生成する.lckファイルファイルにはインポートされたパッケージのバージョン番号が含まれています.
lib/mainでdartにパッケージをインポート

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

asはインポートしたライブラリをプロンプトします.後でインポートされた文字列のヒントがレンダリングされ、インポートされたパッケージが使用されていないことを示します.
英語の単語パッケージを使用して、Hello World文字列ではなくテキストを生成します.
コンテンツ部分の変更:

import 'package:english_words/english_words.dart';

body: Center(
          //child: Text('Hello World'), // Replace the highlighted text...
          child: Text(wordPair.asPascalCase),  // With this highlighted text.
        ),

その他は少し前と同じです
実行後、ホットロードを使用
 
ステータスのあるコントロールを追加
無状態のコントロールは可変である.それを修正できないことを示します.すべての値はfinalです.
ステータスのコントロールがあり、ライフサイクル中にStateステータスが含まれています.の状態が変わります.ステータスのあるコントロールを実現するには少なくとも2つのクラスが必要である.ステータスクラスとコントロールクラスステータスのあるStatefulWidgetクラス自体も可変ではないが、ステータスは持続化作用があり、ライフサイクルでは可変である.
このステップでは、ステータスのあるコントロールを追加します.RandomWordsは、ステータスのあるクラス、RandomWordsStateを作成し、appに追加します.
メールでdartの下に最小化されたステータスクラスを作成

class RandomWordsState extends State {
  // TODO Add build method
}

RandomWordsクラスに依存し、後で追加します.
main.dartの下に追加

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

ステータスクラスを追加すると、ideは欠落したbuildメソッドを完了します.1つのベースのbuildメソッドを追加し、文字ペアを生成します.MyAppからRandomWordsStateに移動

class RandomWordsState extends State {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

古いコードを削除します.その後、再実行します.
 
無限スクロールリストの作成
このステップでは、RandomWordsStateを拡張し、無限の文字ペアリストを生成する.ユーザがスクロールすると、リストにはListViewコントロールが表示され、無限に増加する.ListViewの工場構築方法は、怠惰なロードを許可します.
追加_SggestionsからRandomWordsStateクラスへ.を選択します.biggerFont変数を追加してフォントを大きくします.

class RandomWordsState extends State {
  final _suggestions = [];

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

追加_BuildSuggestions()メソッドはRandomWordsStateクラスにあり、このメソッドは推奨を表示するためにListViewを構築します.
ListViewクラスは構造属性を提供し、itemBuilder、この工場のコールバック方法は非同期方法である.2つのパラメータ、BuildContextとrowカーソルi.呼び出し時にカーソルが0から増加する.このモードは、ユーザがスクロールするときに無限に増加することを可能にする.
追加方法:

class RandomWordsState extends State {
  ...
  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      // The itemBuilder callback is called once per suggested word pairing,
      // and places each suggestion into a ListTile row.
      // For even rows, the function adds a ListTile row for the word pairing.
      // For odd rows, the function adds a Divider widget to visually
      // separate the entries. Note that the divider may be difficult
      // to see on smaller devices.
      itemBuilder: (context, i) {
        // Add a one-pixel-high divider widget before each row in theListView.
        if (i.isOdd) return Divider();

        // The syntax "i ~/ 2" divides i by 2 and returns an integer result.
        // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
        // This calculates the actual number of word pairings in the ListView,
        // minus the divider widgets.
        final index = i ~/ 2;
        // If you've reached the end of the available word pairings...
        if (index >= _suggestions.length) {
          // ...then generate 10 more and add them to the suggestions list.
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }
}

buildRow()メソッドを追加します.この方法はリスト項目を表示する.

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

更新_buildSuggestions()メソッド.ライブラリを直接呼び出して語を生成する.

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

ビルドメソッドを更新し、タイトルを変更し、メイン画面をRandomWordsコントロールに変更

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

appを再実行します.
どんなに遠くまで転がっても、文字ペアが生成されます.