📕

【Flutter】Widgetをまとめていく

2022/07/28に公開

Flutter

Android Studio

Dart

tech

テキストを表示するときに使用するWidgetです。

Text('表示したいテキスト',
  style: TextStyle(
    //色
    color: Colors.red,
    //フォントの太さ
    fontWeight: FontWeight.bold,
    //スタイル
    fontStyle: FontStyle.italic,
    //サイズ
    fontSize: 20,
  ),
  //テキストの位置
  textAlign: TextAlign.end,
  )

また、表示したいテキストを改行したい場合があると思いますが、その際は下記で対応をします。
改行したい位置に\nを入れると改行されます。

Text('表示したい\nテキスト')

divタグのような扱いで使用することが多い基本的なWidgetです。

Container(
  //中に配置したいWidgetを記述
  child: 
  //幅と高さ
  width: 20.0,
  height: 20.0,
  //marginとpadding
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(20),
  //背景色
  color: Colors.blue,
  //子要素の位置を指定
  alignment: Alignment(0.0, 0.0),
)

margin propertyとpadding propertyの説明


EdgeInsets.all(20)	上下左右の余白
EdgeInsets.only(方向: 20)	1方向の余白
EdgeInsets.symmetric(vertical: 20, horizontal: 20)	垂直/平行の余白
EdgeInsets.fromLTRB(20, 10, 15, 10)	各上下左右の余白

複数のWidgetを垂直方向に並べたい時に使用するWidgetです。

Column(
  //垂直方向（縦）の位置の設定
  mainAxisAlignment: MainAxisAlignment.center,
  //平行方向(横)の位置の設定
  crossAxisAlignment: crossAxisAlignment.start,
  children: [
    //ここに複数のWidgetを並べることができる。
  ]
)

複数のWidgetを水平方向に並べたい時に使用するWidgetです。

Row(
  //平行方向(横)の位置の設定
  mainAxisAlignment: MainAxisAlignment.center,
 　　//垂直方向（縦）の位置の設定
  crossAxisAlignment: crossAxisAlignment.start,
  children: [
    //ここに複数のWidgetを並べることができる。
  ]
)

Row Widgetで横並びにした要素をベースラインに合わせたいときは、
crossAxisAlignment: crossAxisAlignment.baselineを設定するだけでは、エラーが出るため下記のように追記する必要がある。

Row(
  crossAxisAlignment: crossAxisAlignment.baseline,
  //追記
  textBaseline: TextBaseline.alphabetic,
  children: [
    //ここに複数のWidgetを並べることができる。
  ]
)

ElevatedButtonは立体的な効果を持ったボタンを作るためのWidgetです。
下記のように、onPressedにclick時の挙動とchildにWidgetを入れることが基本の形となっています。

ElevatedButton(
  onPressed: () {},
  child: Text(
    "Button",
  )
),

背景色の変更

ボタンの背景色を変更したい時は、style: ElevatedButton.styleFromの中で、primaryのカラーを指定してあげることで変更が可能です。また、onPrimaryを指定することでクリックした時の色の変更も可能となっています。

ElevatedButton(
  onPressed: () {},
  child: Text(
    "Button",
  ),
  style: ElevatedButton.styleFrom(
    primary: Colors.black,//ボタンの背景色
    onPrimary: Colors.red,//click時のボタンの背景色
  ),
),

ボタンのサイズ変更

ボタンのサイズを変更する場合は、SizedBox Widgetで囲み、widthとheightを指定することで、ボタンのサイズを調整することができます。

SizedBox(
  width: 350,//幅
  height: 100,//高さ
  child: ElevatedButton(
    onPressed: () {},
    child: Text(
      "Button",
    ),
  ),
),

また、下記のようにfixedSizeでSizeを調整することも可能です。

ElevatedButton(
  onPressed: () {},
  child: Text(
    "Button",
  ),
  style: ElevatedButton.styleFrom(
    fixedSize: const Size(400, 100),
  ),
),

枠線の設定

枠線の太さと色、角の丸みを変更する場合は、BorderSideを設定すれば良いので、下記のように設定します。

ElevatedButton(
  onPressed: () {},
  child: Text(
    "Button",
  ),
  style: ElevatedButton.styleFrom(
  　　side: BorderSide(
    　color: Colors.green, //色
    　width: 2, //太さ
   ),
   shape: RoundedRectangleBorder(
   　　borderRadius: BorderRadius.circular(10),//角丸
   ),
 　),
),

アイコンをボタンに入れる場合

アイコンをボタンに入れたい場合もよくあると思います。その際は、ElevatedButton.iconを使い、iconとlabelの設定を行えば対応できます。

ElevatedButton.icon(
  onPressed: (){},
  icon: Icon(Icons.add),
  label: Text('add'),
),

非活性化

ボタンを押せないように、非活性化するにはonPressedの値をNullにすることで、ボタンの色が非活性化になり、クリックできないようになります。

ElevatedButton(
  onPressed: null,
  child: Text(
    "Button",
  )
),

ElevatedButtonが立体的な効果を持ったボタンだったのに対して、OutlinedButton平面的な効果を持つボタンです。
基本的には、ElevatedButtonとカスタムの仕方は変わりませんが、styleにはOutlinedButton.styleFromと言ったように記述します。
それ以外はElevatedButtonと一緒の設定の仕方で問題ありません。

TextButtonもOutlinedButtonと同じくフラットなボタンですが、ボーダーがないテキストのみのリンクを作るためのものです。
こちらもstyleにはTextButton.styleFromとすれば、後の記述方法はElevatedButtonやOutlinedButtonと一緒です。

今後どんどんWidget類をここにまとめていく予定です。
よろしくお願いします！！！！

【Flutter】Widgetをまとめていく

Text Widget

Container Widget

margin propertyとpadding propertyの説明

Column Widget

Row Widget

ElevatedButton Widget