0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

初学者が思うこれだけあれば何とかなるFlutter基本Widget

Posted at

##はじめに
どうもこんにちは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

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?