Flutter TDD Clean Architecture Course その14 - UI

こちらのチュートリアル学習のアウトプットをします。

今回UIを作成してチュートリアル完了となります。

---

BlocProvider

• BlocをUIに提供するためBlocProviderを使う

number_trivia_page.dart

class NumberTriviaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Number Trivia'),
      ),
      body: BlocProvider(
        builder: (_) => sl<NumberTriviaBloc>(),
        child: Container(),
      ),
    );
  }
}

UI作成

• Placeholderウィジットを使ってアウトラインを作成できる

State変化による再描画

• BlocBuilderを使って再描画する

number_trivia_page.dart

..
// Top half
BlocBuilder<NumberTriviaBloc, NumberTriviaState>(
  builder: (context, state) {
    if (state is Empty) {
      return Container(
        // Third of the size of the screen
        height: MediaQuery.of(context).size.height / 3,
        child: Center(
          child: Text('Start searching!'),
        ),
      );
    }
    // We're going to also check for the other states
  },
),

Event発行

• RaisedButtonのonPressed:にてEvent発行するメソッドを指定する

BlocProvider.of<NumberTriviaBloc>(context)
       .add(GetTriviaForConcreteNumber(inputStr));

学んだこと

• UIの構成を作る際にPlaceholderを使うと便利
  • ただし仮のオブジェクトを配置してしまっても早いとも思う
• ディレクトリ内のclassを全部importする場合、export文を使うと良い
• キーボードを表示させた際に画面が崩れる場合、SingleChildScrollView等でwrapするとよい

---

以上でチュートリアル完了です。

• 基本的にチュートリアルのコードを動かしてみるのが良いと思います。
• 第1回に概要があるのでそちらもご参照ください。