はてなブックマーク

運よくFlutterでの開発プロジェクトに参加できましたので、Flutter開発する前に知っておきたいWidget集をまとめます。 それぞれのWidgetがどんなものなのか、イメージが湧けば十分だと思いますので、画像中心でいきます。 Widgetについて、公式のWidget catalogに詳しくまとまっています。 また、YouTubeでもWidget of the Weekとしてまとめられていますので、こちら全てチェックすることをおすすめします。 個人の見解でWidgetを選定していますのでご了承ください。 Layout系 Align

View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不

Flutter開発する中で、「この形のボタンどうやって書いたっけ？」と調べ直すことが何度かありましたので、ここにまとめておきます。 特に、ボタンウィジェットのshapeで定義できるのは、RoundedRectangleBorderやStadiumBorder、BeveledRectangleBorderなどなど色々ありますが、少し覚えにくいんですよね... 修正点等ありましたら、ご指摘お願いします。 [2020年10月24日追記] Flutter1.22より、ElevatedButtonやTextButton、OutlinedButtonなどのボタンWidgetが追加されたため、そちらも追記しておきます。 いろんなボタンまとめ 1.色付きボタン // Flutter1.22以降のみ ElevatedButton( child: const Text('Button'), style: El

Flutterのダイアログについてまとめます。 結論としては、こんな感じです。 ・選択肢ダイアログ ： SimpleDialog ・ボタンつきまたはカスタマイズ ： AlertDialog ・それでも実現できない場合 ： 新規ページにダイアログを実装する Material編 SimpleDialog SimpleDialogは、基本的に選択肢から選ぶようなダイアログの場合に使用します。 選択肢はSimpleDialogOptionを使って実装できます。 また、Dialogを表示する際にはshowDialog()メソッドを呼び出します。 これはDialogの種類に関わらず共通事項です。 showDialog( context: context, builder: (context) { return SimpleDialog( title: Text("タイトル"), children: <

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?