Fluter Usage 2

7047 ワード
flutter テキストリンク
Getting started
関連リンクをクリアしたまま、今回の練習を行いました.
チュートリアル

Write Your First Flutter App, part 1


📌 Stateful widgetとStateless widget


  • ステータスウィジェットなしでは変更できません.(all values are final)

  • ステータスウィジェットは変更可能な状態を維持します.

  • ステータスウィジェットを実装するには、少なくとも2つのクラスが必要です.
    -a StatefulWidget class(State classのインスタンスを作成)
    - a State class

    • Step 1: Create the starter Flutter app


    lib/main.Dartのコードを変更します.

    Step 2: Use an external package


    このプロジェクトにはenglish words packageが必要です.
    チュートリアルで説明した順序で行います.

    Step 3: Add a Stateful Widget


    RandomWords(ステータスウィジェット)とRandomWordState(ステータスウィジェット)を追加します.(RandomWordがstate classであるRandwomWord classを作成します.)
    RandomWordsクラスはMyApp(ステータスなし)でchildとして使用できます.
    class RandomWords extends StatefulWidget {
  const RandomWords({ Key? key }) : super(key: key);

  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
     final wordPair = WordPair.random();
     return Text(wordPair.asPascalCase);
  }
}
//build 함수 업데이트 하였다.

    Step 4: Create an infinite scrolling ListView

    
class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Startup Name Generator'),
      ),
      body: ListView.builder( 
        padding: const EdgeInsets.all(16.0),
        itemBuilder: /*1*/ (context, i) { 
          if (i.isOdd) return const Divider(); /*2*/

          final index = i ~/ 2; /*3*/
          if (i >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return ListTile(
            title: Text(
              _suggestions[i].asPascalCase,
              style: _biggerFont,
            ),
          );
        },
      ),
    );
  }
}
    inifinitemのためにListViewを用意しましたbuilderを使用すると理解します.
    /1/

  • itemBuilderはコールバック関数です.(ListViewまたはfluf frameworkは、コンテンツを表示する必要がある場合にitemBuilderを呼び出します.-callback関数の実行時)

  • i wordpairingを2回追加します.(一度はListTile、もう一度はDivider)
    • /2/
  • iが奇数の場合、関数はDeviderウィジェットを追加します.(これは画面に表示される線を示します.)
    • /3/
    これを
  • 2に分割したのは、セパレータウィジェット以外の実際の数字を計算するためである.
    • /4/
  • 使用可能ワードの末尾に達すると、10個が生成され、推奨リストに追加されます.

    • Write Your First Flutter App, part 2


    アイコンの追加、インタラクティビティの追加、既存のページへの新しいページ(グラフィックスではルーティングと呼ばれます)の接続を実現します.

    Step 1-3はインストール手順


    Step 4 : Add icons to the list


    保存したセットを
  • RandomWordStateに追加
    final _saved = <WordPair>{};     // NEW
    変数
  • pairを追加し、saveに存在するかどうかを確認しました.
     final alreadySaved = _saved.contains(pair);  // NEW
  • alreadySaved値に基づいてアイコンの形状と色を決定します.
    • trailing: Icon(     // NEW from here...
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
      semanticLabel: alreadySaved ? 'Remove from saved' : 'Save',
    ),

    現在、インタラクティブ性は増加していません.

    Step 5: Add interactivity


    この段階では、ハートアイコンをタブとして作成します.ユーザーがリストのエントリを所望の状態に切り替えると、そのペアはsaved setに追加または削除されます.
  • onTap
    • を追加
    onTap: () {      // NEW lines from here...
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else { 
          _saved.add(pair); 
        } 
      });
    },

    Step 6: Navigate to a new screen


    新しいページを追加します.(flutではルーティングと呼ばれます.)
    コース間で移動艦の練習をしてみます.
    Navigatorは、アプリケーションのルーティングを含むスタックを管理します.
    ナビゲーションスタックにルーティングをプッシュすると、ルーティングのタグが更新されます.
    Navigator stack popから前のルートを返します.
      void _pushSaved() {
    Navigator.of(context).push(
      // Add lines from here...
      MaterialPageRoute<void>(
        builder: (context) {
          final tiles = _saved.map(
            (pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = tiles.isNotEmpty
              ? ListTile.divideTiles(
                  context: context,
                  tiles: tiles,
                ).toList()
              : <Widget>[];

          return Scaffold(
            appBar: AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ), // ...to here.
    );
  }
    Navigator.of(context).push{
	MaterialPageRoute<void>(
		...
	)
}
    のコードを介してNavigatorに新しいルーティングをプッシュします.(例では、新しいルーティングは、愛の名前が表示されたページです.)
    新しいページの内容は、MaterialPageRouteのコンストラクタ属性で匿名関数を使用して記述されます.
    tilesは、save内のpairを表すListTileを返します.
    diffled tilesが空の場合はスペース、tilesが空の場合は区切り線を表します.
    製品urlをbodyのclassに追加しない
    POST