【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part32 Single-child layout widgets
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part32 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part31 Single-child layout widgets
引き続き、Single-child layout widgetsについて学びます。
Single-child layout widgets
Paddingウィジェット
Paddingウィジェットはchildプロパティで指定したウィジェットと、Paddingウィジェットの1つ上の親ウィジェットとの距離を設定できます。
距離はEdgeInsetsクラスを使用します。間に挟まれて大変そうですね(笑
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 size = MediaQuery.of(context).size;
var w = size.width;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: SizedBox(
width: 300,
height: 300,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.green,
),
// ↑のDecoratedBoxが親ウィジェットです。
// このウィジェットと・・・
child: Padding(
padding: EdgeInsets.all(16.0), // 距離はEdgeInsetsクラスを使います。
// ↓このウィジェットの距離を設定できます。
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black,
)))))));
}
}
EdgeInsetsクラス
EdgeInsetsクラスはContainerウィジェットのmarginプロパティやPaddingプロパティの上下左右のオフセット値として利用されます。
名前付きのコンストラクタで指定するということです。先ほど登場したEdgeInsets.allも名前付きコンストラクタだったんですね。
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 size = MediaQuery.of(context).size;
var w = size.width;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('テスト中です。'),
),
body: Column(
children: <Widget>[
SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.green,
),
// ↑のDecoratedBoxが親ウィジェットです。
// このウィジェットと・・・
child: Padding(
// EdgeInsets.allという名前のコンストラクタ！
padding: EdgeInsets.all(16.0), // 距離はEdgeInsetsクラスを使います。
// ↓このウィジェットの距離を設定できます。
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black,
))))),
SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.green,
),
child: Padding(
// 4辺のいずれかを指定
padding: EdgeInsets.only(
left: 10.0), // 本書では{this.xxx=0.0}と書いてありますができませんでした。
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black,
))))),
SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.green,
),
child: Padding(
// 上下だけ、左右だけ同じ指定をする
padding: EdgeInsets.symmetric(
vertical: 10.0, // 上下
),
// ・・・↓できません。ちょっと記述が適当すぎる気も・・・。
//padding: EdgeInsets.symmetric({double vertical = 0.0,}),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black,
))))),
SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.green,
),
child: Padding(
// それぞれの辺を自由に設定！
padding: EdgeInsets.fromLTRB(
2.0, 3.0, 4.0, 5.0), // こちは名前付き引数使えない！なんでやねん！
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black,
)))))
],
),
));
}
}
並べてみました。
最後に
EdgeInsetsはオフセット値だけのためのクラス・・・やや地味ですが大事なパーツです。
今日はここまで！