1-4.入力画面を作成する

今回は新規登録や変更時に使用するために入力するためにInputPageというStatelessウィジェットを新たに作成します。

class InputPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Input Page'),
        ),
        body: Column(
          children: [
            TextField(),
            TextField(),
          ],
        ),
      ),
    );
  }
}

9行目のbody内にColumnウィジェットを作成して、childrenの中にTextFieldウィジェットを２つ追加します。

Columnウィジェットは子のウィジェットを縦方向に順に並べて表示するウィジェットです。また横方向に順に並べるRowウィジェットがあります。

そして11行目のTextFieldウィジェットは入力フィールドを表示するウィジェットです。

あとは分かりやすくするために6行目のAppBarのtitleをInput Pageとしておきます。

ただ入力フィールド自体はアンダーラインがあるだけで分かりにくく、また何を入力すればいいのかも分からないので、これでは使う人が戸惑ってしまいます。

そこで入力フィールドを分かりやすく改良していきたいと思います。

まずは入力フィールドに外枠を表示するようにコードを追加します。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
  ),
),

TextFieldウィジェットにdecoration内にInputDecorationを追加して、その中にborder内にOutlineInputBorderを追加して、またその中にborderRadius内にBorderRadiusを追加します。

InputDecorationは入力フィールドに境界線やラベルなどを装飾します。

OutlineInputBorderは入力フィールドに境界線を描画します。

BorderRadiusは入力フィールドに境界線の角に丸みをもたせる機能があり、BorderRadius.circularで指定した数値によって４つの角を丸みをもたせます。

そうすると入力フィールド自体は分かりやすくなりました。

次に何を入力すればいいのか分からないので、入力フィールドにラベルを追加します。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    labelText: 'Dog Name',
  ),
),

InputDecoration内にlabelTextを追加して「Dog Name」という文字列を指定してレベルを描画します。

また同じように２つ目のTextFieldウィジェットには「Dog Age」という文字列を指定してレベルを描画します。

そうするとアクティブな入力フィールドには外枠上部にラベルが表示されて、非アクティブの時には入力フィールド内にラベルが表示されます。

最後に入力フィールドが接していてアクティブな入力フィールドの外枠上部のラベルが分かりにくくなっているので、２つの入力フィールドに余白を付けましょう。

余白を付けるにはいろんな方法がありますが、今回は手軽にSizedBoxウィジェットを使って２つのTextFieldウィジェットの上部に余白を追加します。

SizedBox(height: 4.0,),
TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    labelText: 'Dog Name',
  ),
),

SizedBoxウィジェット内にheightに数値を指定して縦の余白を追加しましょう。

これで入力フィールドの上部のラベルが分かりやすくなりました。

ここまでmain.dartの中に２つの画面を作成してきましたが、画面が増えると新たなStatelessウィジェットを作成することとなります。

ただ画面数が多くなると一つのコードでは行数が長くなって管理が難しくなってしまいます。

そうならないために、次回はコードを分割してコードを管理しやすくしていきます。