FlutterのWidgetの基礎part3

はじめに

前回に引き続きFlutterの基本的なWidgetについて書いていきます。

Text Widget

Textウィジェットは画面にテキストを出力してくれます。

サンプルコード

home: Scaffold(
  body: Text(
     'Loading Screen',
      style: TextStyle(
            fontSize: 30,
　　　　　　 color: Colors.blue
      ),
    ),
  )

styleは、文字の大きさ、文字の色などを変更できます。
今回はフォントサイズを30、文字色を青色にしています。

TextField Widget

TextFiledウィジェットはユーザー側のキーボード入力を受け付けるWidgetです。
メールアドレスやパスワードの入力欄が必要なログイン画面には必須のWidgetです。

サンプルコード
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Container(
        width: double.infinity,
        child: TextField(),
      ),
    );
  }

Button Widget

ボタンを表示用するにはButton Widgetを使用します。
Button Widgetの基本的なものは以下の3種類があります。
・TextButton → 影のないボタン
・OutlinedButton → 枠線のあるボタン
・ElevatedButton → 影のあるボタン
各ボタン表示用Widgetの基本的な使い方としては、child Widgetにボタン内に表示したいWidgetを指定し、
ボタンがタップされた時の処理は、onPressedに記述すれば大丈夫です。

TextButton(
  onPressed: () { /* ボタンがタップされた時の処理 */ },
  child: Text('TextButton'),
)

OutlinedButton(
  onPressed: () { /* ボタンがタップされた時の処理 */ },
  child: Text('OutlinedButton'),
)

ElevatedButton(
  onPressed: () { /* ボタンがタップされた時の処理 */ },
  child: Text('ElevatedButton'),
)

Image Widget

画像を表示するWidgetです。
インターネット上の画像を表示する場合は以下のように書きします。

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
)

アプリ内のローカル画像を表示する方法であるImage.assetについては下記の記事が参考になりました。

• ［Flutterで画像を表示する方法【まとめ】

まとめ

今回はText Widget、Button Widget、Button Widget、Image Widgetについて簡単にまとめてみました。
まだ理解しきれていない部分も多いので間違っている箇所あればぜひコメントいただけると幸いです。
最後までご覧いただきありがとうございました！