【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part19 Single-child layout widgets
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part19 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part18 Single-child layout widgets
引き続き、Single-child layout widgetsについて学びます。
Single-child layout widgets
Containerウィジェット
alignmentプロパティ
alignment
プロパティはchild
プロパティの位置を指定します。
なので・・・以下のようにしても期待した結果にはなりません。
また、幅・高さを表示可能サイズよりも小さくしないとやはり期待した結果にはなりません。
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('テスト中です。'),
),
// ColorではなくてColors!
body: Container(
alignment: Alignment.center,
color: Colors.greenAccent,
width: 200,
height: 200,
),
),
);
}
}
以下のような結果になります。
上下左右中央揃えを期待したのですが左上にContainer
オブジェクトが表示されています。
child
プロパティをきちっと設定すれば、child
プロパティに対しての位置を整えてくれます。
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('テスト中です。'),
),
// ColorではなくてColors!
body: Container(
alignment: Alignment.center,
child: Container(
color: Colors.greenAccent,
width: 200,
height: 200,
),
),
),
);
}
}
これで期待した通りの動作になりました。
ちなみに、以下のように実装するとどうなるでしょう?
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: Container(
alignment: Alignment.center,
// 子供は中央揃え・・・どうなる?
child: Container(
color: Colors.greenAccent,
width: 50,
height: 50,
),
color: Colors.pinkAccent,
width: 200,
height: 200,
),
),
);
}
}
こうなりました!
大枠のコンテナは左上に。そのコンテナにの中央にChildのコンテナが表示されています。
最後に
alignmen
プロパティはAlign
ウィジェットやCenter
ウィジェットで代替できるそうです。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません