##はじめに
どうもこんにちはFlutterを最近触っているものです。Flutterでスマートフォンアプリを作っており、その備忘録がてら記事にまとめています
この記事のWidgetの書き方を見て参考になってくれる人がいれば幸いです
######この記事の書き方
初めにWidgetの種類を記載してその後Widgetクラスの基本形を示しています
##Center
中央揃えをしてくれるウェジェットです
Center(
child: ・・・ウェジェット・・・
)
##Container
Centerウィジェットは単に中央にウェッジェとを配置するだけですが,Containerウェジェットはウェジェットを左に揃えたりスペースを開けたり細かな設定を出来るようになります
Container(
child: ・・・ウェジェット・・・,
padding: [EdgeInset],
alignment: [Alignment],
)
##Column
縦にウェジェットを複数並べることが出来るウェジェットです
Column(
mainAxisSize: [MainAxisSize],
mainAxisAlignment: [MainAxisAlignment],
crossAxisAlignment: [CrossAxisAlignment],
children: <Widget>[
・・・Columに含むウェジェット・・・
]
)
##Row
Columnと機能が似ており、ウェジェットを横に複数並べることが出来ます。
Row(
mainAxisSize: [MainAxisSize],
mainAxisAlignment: [MainAxisAlignment],
crossAxisAlignment: [CrossAxisAlignment],
children: <Widget>[
・・・Rowに含むウェジェット・・・
]
)
##Stack
複数のウェジットを重ね合わせることが出来ます
Stack(
children: <Widget>[
・・・Stackに配置するウェジェット・・・
]
)
##Expanded
ウェジェットを画面の端から端まで全体を表示させたい時に利用するウェジェット
Expanded(
child: ・・・ウェジェット・・・,
)
##SizedBox
決まった大きさのウィジェットを組み込みたい時に利用できるウィジェット
SizedBox(
width: 値,
height: 値,
child: ・・・ウェジェット・・・,
)
##Card
ウェジェットをパネルのように扱い、表示領域を確保することが出来るウェジェット
Card(
margin: [EdgeInset],
child: <Widget>[
・・・Cardに含むウィジェット・・・
]
)
##SingleChildScrollView
画面スクロールを表示できるウィジット
SingleChildScrollView(
child: ・・・ウィジェット・・・
)
##FlatButton
平面時なデザインをしたボタンウェジェット
FlatButton(key: null,
onPressed: ・・・何かの関数名・・・,
color: [Color],
child: ・・・ウェジェット・・・,
)
##RaisedButton
FlatButtonと違い色々とカスタマイズできるボタンウェジェット
RaisedButton(
onPressed:・・・何かの関数名・・・ ,
child: ・・・ウェジェット・・・,
)
##FloatingActionButton
Flutterのプロジェクトを立ち上げた時に右下に出てくるボタンウェジェット
FloatingActonButton(
child: Icon(),
onPressed: ・・・ウェジェット・・・
)
##TextField
一行だけテキストの入力をすることが可能なウェジェット
TextField(
controller: [TextEditingController],
style: [TextStyle]
)
##Checkbox
チェックを付けたか否かの二者択一の値を入力できるウェジェット
Checkbox(
value: [bool],
onChanged: ・・・何かの関数名・・・
)
##ShowDialog
ボタンが画面に表示されるウェジェットです.Contextの部分をAlertDialogなどに変えると小さなウィンドウが画面にポップアップされるようになります
showDialog(
context: context,
builder: (BuilderContext context) => Container(・・・),
)
##終わりに
今回記述したウェジェット以外にも有用なものはたくさんあります。FLutterの公式ドキュメントやyoutubeのFlutterチャンネルでもたくさんのウェジェットが紹介されているのでぜひ見てください.
他にも便利ウェジェットなどがあれば紹介してくださると助かります.
###参考文献,参考資料
https://flutter.dev/docs
https://flutter.ctrnost.com/
https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw