flutter widget

[Flutter] サンプルコード集

概要

FlutterのWidgetのサンプルコードをまとめる。

サンプルは随時追記する予定です。長くなりすぎているので、Gitあたりにコード移行しようか検討中。。

サンプル集

並べた要素を均等に並べる

画像

4つの要素が均等に。白が余白のイメージ。

サンプルプログラム

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Alignment',
      home: Center(
        child:Container(
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container( color: Colors.amber, width: 50, height:50 ),
              Container( color: Colors.blue, width: 50, height:50 ),
              Container( color: Colors.deepOrange, width: 50, height:50 ),
              Container( color: Colors.green, width: 50, height:50 ),
            ],
          ),
        ),
      ),
    );
  }
}

並べた要素を均等に並べる(最初と最後の余白なし)

画像

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Alignment',
      home: Center(
        child:Container(
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container( color: Colors.amber, width: 50, height:50 ),
              Container( color: Colors.blue, width: 50, height:50 ),
              Container( color: Colors.deepOrange, width: 50, height:50 ),
              Container( color: Colors.green, width: 50, height:50 ),
            ],
          ),
        ),
      ),
    );
  }
}

並べた要素を均等に並べる(全ての要素が均等)

画像

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Alignment',
      home: Center(
        child:Container(
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container( color: Colors.amber, width: 50, height:50 ),
              Container( color: Colors.blue, width: 50, height:50 ),
              Container( color: Colors.deepOrange, width: 50, height:50 ),
              Container( color: Colors.green, width: 50, height:50 ),
            ],
          ),
        ),
      ),
    );
  }
}

ドロップダウン(リストアイテム)

画像

固定のアイテムを使いたい時。

サンプルプログラム

import 'package:flutter/material.dart';

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

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

class ChangeForm extends StatefulWidget {
  @override
  _ChangeFormState createState() => _ChangeFormState();
}

class _ChangeFormState extends State<ChangeForm> {

  String _defaultValue = 'リスト1';
  // リストアイテム
  List<String> _list = <String>['リスト1', 'リスト2', 'リスト3', 'リスト4'];
  String _text = '';

  // onChangedのイベントハンドラ定義
  void _handleChange(String newValue) {
    setState(() {
      _text = newValue;
      _defaultValue = newValue;
    });
  }

  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(50.0),
        child: Column(
          children: <Widget>[
            Text(
              "$_text",
              style: TextStyle(
                  color:Colors.red,
                  fontSize: 15.0,
              ),
            ),
            DropdownButton<String>(
              value: _defaultValue,
              onChanged: _handleChange,
              items: _list.map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ],
        )
    );
  }
}

テキストボックス

画像

サンプルプログラム

import 'package:flutter/material.dart';

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

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

class TextFieldForm extends StatefulWidget {
  @override
  _TextFieldFormState createState() => _TextFieldFormState();
}

class _TextFieldFormState extends State<TextFieldForm> {

  String _text = '';

  void _handleText(String newText) {
    setState(() {
      _text = newText;
    });
  }

  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(50.0),
        child: Column(
          children: <Widget>[
            Text(
              "$_text",
              style: TextStyle(
                  color: Colors.blue,
                  fontSize: 15.0,
              ),
            ),
            new TextField(
              // 活性・非活性の設定
              enabled: true,
              // 最大入力可能数
              maxLength: 10,
              // maxLength以上の文字数を入力した時の挙動。
              // trueは入力不可、falseは入力可能だが見た目上エラーになる。
              maxLengthEnforced: true,
              style: TextStyle(color: Colors.black),
              // 入力値をマスクするか(パスワード入力時のような挙動)
              obscureText: false,
              maxLines: 1,
              onChanged: _handleText,
            ),
          ],
        )
    );
  }
}

テキストボックス(maxLengthEnforced)

画像

指定文字数入力すると見た目上エラー(赤く)する。

サンプルプログラム

上記のテキストボックスサンプルプログラムのmaxLengthEnforced属性をfalseに設定する。

リスト型のチェックボックス

画像

CheckboxListTile

サンプルプログラム

import 'package:flutter/material.dart';

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

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

class CheckboxListTileForm extends StatefulWidget {
  @override
  _CheckboxListTileState createState() => _CheckboxListTileState();
}

class _CheckboxListTileState extends State<CheckboxListTileForm> {

  bool _flag = false;

  void _handleCheckbox(bool e) {
    setState(() {
      _flag = e;
    });
  }

  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          new(
            activeColor: Colors.blue,
            title: Text('タイトル'),
            subtitle: Text('サブタイトル'),
            // アイコンをつけるとき
            secondary: new Icon(
              Icons.thumb_up,
              color: _flag ? Colors.orange[700] : Colors.grey[500],
            ),
            // チェックボックスの配置を指定
            controlAffinity: ListTileControlAffinity.leading,
            // フラグの値(boolean)
            value: _flag,
            // 押下時
            onChanged: _handleCheckbox,
          ),
        ],
      )
    );
  }
}

スライダー

画像

サンプルプログラム

import 'package:flutter/material.dart';

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

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

class CheckboxListTileForm extends StatefulWidget {
  @override
  _CheckboxListTileState createState() => _CheckboxListTileState();
}

class _CheckboxListTileState extends State<CheckboxListTileForm> {

  double _value = 0.0;
  double _startValue = 0.0;
  double _endValue = 0.0;

  void _changeSlider(double e) => setState(() { _value = e; });
  void _startSlider(double e) => setState(() { _startValue = e; });
  void _endSlider(double e) => setState(() { _endValue = e; });

  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(50.0),
      child: Column(
        children: <Widget>[
          Center(child:Text("現在の値:${_value}")),
          Center(child:Text("開始時の値:${_startValue}")),
          Center(child:Text("終了時の値:${_endValue}")),
          new Slider(
            // 動かしている時に表示される値
            label: '${_value}',
            // 最小値
            min: 0,
            // 最大値
            max: 10,
            value: _value,
            // 選択範囲の色
            activeColor: Colors.red,
            // 未選択範囲の色
            inactiveColor: Colors.blue,
            // メモリの数値 (max-min) / divisions
            divisions: 20,
            onChanged: _changeSlider,
            onChangeStart: _startSlider,
            onChangeEnd: _endSlider,
          )
        ],
      )
    );
  }
}

Drawer(ドロワー、メニュー)

画像

Drawer

サンプルプログラム

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer',
      home: Scaffold(
        body: Center(
          child: MainPage(),
        ),
      ),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drawer'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text('ヘッダー'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text("アイテム1"),
              trailing: Icon(Icons.mail),
            ),
            ListTile(
              title: Text("アイテム2"),
              trailing: Icon(Icons.settings),
            ),
          ],
        ),
      ),
    );
  }
}

DatePicker(日本語化なし)

画像

DatePickerDatePickerボタン押下時

サンプルプログラム

import 'package:flutter/material.dart';

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

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

class DatePicker extends StatefulWidget {
  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {

  // 現在日時
  DateTime _date = new DateTime.now();

  // ボタン押下時のイベント
  void onPressedRaisedButton() async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2018),
      lastDate: new DateTime.now().add(new Duration(days: 360))
    );

    if (picked != null) {
      // 日時反映
      setState(() => _date = picked);
    }
  }

  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(70.0),
        child: Column(
          children: <Widget>[
            // 日時表示部分
            Center(child:Text("${_date}")),
            // DatePicker表示ボタン。
            new RaisedButton(onPressed: () => 
              // 押下時のイベントを宣言。
              onPressedRaisedButton(),
              child: new Text('日付選択'),
            )
          ],
        )
    );
  }
}

 

DatePicker(日本語化あり)

下記コードのみでは、不可能です。パッケージのインストールが必要。

詳細はこちらを参照してください。

画像

DatePicker日本語化後

サンプルプログラム

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DatePickerSample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('DatePickerSample'),
        ),
        body: Center(
          child: DatePicker(),
        ),
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale("en"),
        const Locale("ja"),
      ],
    );
  }
}

class DatePicker extends StatefulWidget {
  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {

  // 現在日時
  DateTime _date = new DateTime.now();

  // ボタン押下時のイベント
  void onPressedRaisedButton() async {
    final DateTime picked = await showDatePicker(
      locale: const Locale("ja"),
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2018),
      lastDate: new DateTime.now().add(new Duration(days: 360))
    );

    if (picked != null) {
      // 日時反映
      setState(() => _date = picked);
    }
  }

  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(70.0),
        child: Column(
          children: <Widget>[
            // 日時表示部分
            Center(child:Text("${_date}")),
            // DatePicker表示ボタン。
            new RaisedButton(onPressed: () => 
              // 押下時のイベントを宣言。
              onPressedRaisedButton(),
              child: new Text('日付選択'),
            )
          ],
        )
    );
  }
}

 

SingleChildScrollViewとDatatableの組み合わせ

概要は、[Flutter] SingleChildScrollViewを使ってdatatableを実装してみた を参照してください。

画像

完成形のDatatable1枚目 完成形のDatatable2枚目

サンプルプログラム

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'DatatableSample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      // スクロールする方向
      scrollDirection: Axis.horizontal,
      child: DataTable(
      columns: const <DataColumn>[
        DataColumn(label: Text('日付')),
        DataColumn(label: Text('曜日')),
        DataColumn(label: Text('開始')),
        DataColumn(label: Text('終了')),
        DataColumn(label: Text('その他')),
      ],
      rows: const <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('5月1日')),
            DataCell(Text('月')),
            DataCell(Text('9:00')),
            DataCell(Text('18:00')),
            DataCell(Text('dummy')),
          ],
        ),
      ],
      )
    );
  }
}

Firebase(Cloud Firestore)に繋げる

詳細な手順はこちらを参照してください。

サンプルプログラム

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CharacterList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Query users = FirebaseFirestore.instance.collection('characters');

    return Scaffold(
      appBar: AppBar(
        title: Text('取得データ一覧'),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: users.snapshots(),
        builder: (BuildContext context, stream) {
          if (stream.hasError) {
            return Text('Something went wrong');
          }

          if (stream.connectionState == ConnectionState.waiting) {
            return Text("Loading");
          }

          QuerySnapshot querySnapshot = stream.data;
          return ListView(
            children: querySnapshot.docs.map((DocumentSnapshot document) {
              return ListTile(
                title: Text(document.data()['title']),
              );
            }).toList(),
          );
        },
      ),
    );
  }
}

 

-flutter, widget
-, , , , , ,

Copyright© エンジニアが学んだことをアウトプットしていく , 2022 All Rights Reserved Powered by AFFINGER5.