flutter

flutterで日時(datetimepicker)を表示して選択する

Introduce

今回は日時を表示させて選択できるような画面を作っていきます.

flutter_datetimepicker

Environment

Requirement

使用するパッケージをpubspec.yamlファイルに追加します.

本コードはflutter create直後を想定しています.

Usage

ソースコードはこちら.

monkeydaichan/flutter_samples
sample of flutter. Contribute to monkeydaichan/flutter_samples development by creating an account on GitHub.

ファイル構成

View

main.dart

まずはmain.dartを編集して,screen.dartファイルのWidgetを表示させるようにします.
ThemeDataを使用しているのは何度も同じ内容書きたくないからです.

screen.dart

BasicDateFieldが日付を選択するためのカレンダーを表示させるWidgetです.
TimeShowはタップしたときに,Visibilityコンテナの表示/非表示を切り替えます.
TimeFieldは時間を選択するためのスピナーを表示させます.

widgets.dart

screen.dartで表示させる3つのWidgetを作ります.

bloc.dart

ここでは,2つの関数を作ります.
- setDate --- TimeField Widgetのスピナーで取得した日時をセットします.
- showTimePicker --- TimeField Widgetの表示/非表示を切り替えます.

setDateで取得した日時はwidgets.dartの下記の部分で表示させています.

Reference

providerの使い方は下記のサイトを参考にしました.ありがとうございます!

[Flutter] package:provider の各プロバイダの詳細 - Qiita

はじめに

Google I/O 2019 にて provider というパッケージについて言及があり、公に Google 推奨になりました。

provider | Flutter Package
https://pub.de...

まだ BLoC で消耗してるの? | Unselfish Meme

[Flutter] [Pragmatic State Management in Flutter (Google I/O'19)]で推奨されてたProvider使ってみた - Qiita
Pragmatic State Management in Flutter (Google I/O'19)の中でこれからFlutter始めるならproviderを推奨するって言われてたので少しだけ触ってみました。

今回はChange...

-flutter
-,

Translate »