【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part29 Single-child layout widgets
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part29 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part28 Single-child layout widgets
引き続き、Single-child layout widgetsについて学びます。
Single-child layout widgets
Aligh, Centerウィジェット
AlighウィジェットとCenterウィジェットはchildプロパティに指定したウィジェットの配置を指定できます。
alignmentプロパティ
alignmentプロパティをにAlignmentクラスに定義されている定数を使って配置します。
中央配置の場合はCenterウィジェットが可読性も上がるのでお勧め😉
Centerウィジェットはいままで何回も使用してきましたね。中央に配置するのに特化しているので使いやすいです。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
var ok = false;
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _State();
}
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) {
var mediaQuery = MediaQuery.of(context);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: Align(
alignment: Alignment.bottomRight,
child: SizedBox(
width: 300,
height: 300,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.greenAccent),
))),
));
}
}
SizedBoxウィジェットが右下に表示されましたね。
位置を数値でも指定可能です。
動的に数値を変更してすすーって動かせそうですね。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
var ok = false;
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _State();
}
}
class _State extends State<MyApp> {
@override
Widget build(BuildContext context) {
var mediaQuery = MediaQuery.of(context);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: Align(
alignment: Alignment(0.9, -0.9), // 数値での指定も可能です。1.0～-1.0
child: SizedBox(
width: 300,
height: 300,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.greenAccent),
))),
));
}
}
ウィジェットが右上に表示されました。
最後に
3章はまだまだ続く！
今日はここまで！