「Flutter/UI/Scaffold」の版間の差分
ナビゲーションに移動
検索に移動
ページの作成:「==上部バーの右にボタンを設置== <pre> @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("$wid...」 |
編集の要約なし |
||
| (同じ利用者による、間の3版が非表示) | |||
| 44行目: | 44行目: | ||
]; | ]; | ||
} | } | ||
</pre> | |||
==上部バーの右に2つボタンを設置== | |||
<pre> | |||
actionsを以下のように変更。 | |||
actions: <Widget>[ | |||
IconButton( | |||
icon: Icon(Icons.add), | |||
onPressed: () => setState(() { | |||
_count++; | |||
}), | |||
), | |||
IconButton( | |||
icon: Icon(Icons.remove), | |||
onPressed: () => setState(() { | |||
_count--; | |||
}), | |||
), | |||
], | |||
</pre> | |||
==画面右下にボタンを表示== | |||
floatingActionButtonをScaffoldの項目に追加 | |||
return Scaffold( | |||
appBar: AppBar( | |||
title: Text(widget.title), | |||
), | |||
body: Center( | |||
child: Column( | |||
mainAxisAlignment: MainAxisAlignment.center, | |||
children: <Widget>[ | |||
Text( | |||
'hello', | |||
), | |||
], | |||
), | |||
), | |||
floatingActionButton: FloatingActionButton( | |||
onPressed:() { | |||
// ボタン処理 | |||
}, | |||
tooltip: 'Increment', | |||
child: Icon(Icons.add), | |||
), | |||
); | |||
==Barを透明に== | |||
extendBodyBehindAppBar: true を追加して、 | |||
backgroundColorを Colors.blue.withOpacity(0.3),のようにする。 | |||
<pre> | |||
Scaffold( | |||
appBar: AppBar( | |||
backgroundColor: Colors.blue.withOpacity(0.3), | |||
title: Text("タイトル", | |||
style: TextStyle( | |||
fontSize: 16, | |||
locale: Locale("ja", "JP") | |||
) | |||
), | |||
), | |||
extendBodyBehindAppBar: true, | |||
body: Text("本文") | |||
); | |||
</pre> | </pre> | ||
2019年12月18日 (水) 16:57時点における最新版
上部バーの右にボタンを設置
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("$widget.title"),
actions: _buildAppBarActionButton()
),
);
}
List<Widget> _buildAppBarActionButton() {
return <Widget>[
MaterialButton(
onPressed: () {
},
child: Text(
"Setting",
style: TextStyle(
fontSize: 14.0,
color: Colors.white
),
),
)
];
}
iconを右上に設定したい場合
flutter/アイコン追加 [ショートカット]
List<Widget> _buildAppBarActionButton() {
return <Widget>[
MaterialButton(
onPressed: () {
},
child: Icon(
Icons.settings,
color: Colors.white,
size: 30.0,
)
)
];
}
上部バーの右に2つボタンを設置
actionsを以下のように変更。
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () => setState(() {
_count++;
}),
),
IconButton(
icon: Icon(Icons.remove),
onPressed: () => setState(() {
_count--;
}),
),
],
画面右下にボタンを表示
floatingActionButtonをScaffoldの項目に追加
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'hello',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed:() {
// ボタン処理
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
Barを透明に
extendBodyBehindAppBar: true を追加して、 backgroundColorを Colors.blue.withOpacity(0.3),のようにする。
Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue.withOpacity(0.3),
title: Text("タイトル",
style: TextStyle(
fontSize: 16,
locale: Locale("ja", "JP")
)
),
),
extendBodyBehindAppBar: true,
body: Text("本文")
);