blitz-time アプリ開発ブログ

Androidアプリ開発などのTips集

【Flutter】コンテナの左と右にウィジェットを配置する

コンテナ内にテキストを配置し、その領域をタップすると編集画面を表示できるようにしたいと思いますが、タップできることを表現できるように「>」アイコンを配置しよう。と思います。

Row(
	children: [
		Text("めもめもめも",
			style: TextStyle(
			color: Colors.black,
			fontSize: 20)
		),
		Icon(Icons.keyboard_arrow_right),
	]
)

おいてみましたが、こうなる。。。
f:id:mfblitz:20210123214252p:plain

「>」ボタンは右端に置きたいよね。。。
「mainAxisAlignment: MainAxisAlignment.spaceBetween」を使うと、ウィジェットの間に空間を配置するので、これで行けそうです。

Row(
	mainAxisAlignment: MainAxisAlignment.spaceBetween,
	children: [
		Text("めもめもめも",
			style: TextStyle(
			color: Colors.black,
			fontSize: 20)
		),
		Icon(Icons.keyboard_arrow_right),
	]
)

f:id:mfblitz:20210123214306p:plain