【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part30 Single-child layout widgets
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part30 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part29 Single-child layout widgets
引き続き、Single-child layout widgetsについて学びます。
Single-child layout widgets
Align, Centerウィジェット
widthFactor, heightFactorプロパティ
widthFactor
とheightFactor
は少し変わり種なプロパティのようです。
画面の横幅(もしくは縦幅)に応じた表示位置の指定が可能です。
使いどころはどこでしょうか?Android端末は種類がたくさんあり、画面サイズの種類も無限にあったりします。
そんな端末に対応するアプリではこのプロパティが必須になってきたりするのでしょうか?(推測です。)
画面の幅が411.42875….なので
久しぶりによくわからない文章がでてきました(笑
画面の幅を調べる方法を隅っこにちょこっと書いておいてくれればもっと読みやすくなると思うのですよ。
画面の幅を取得するにはMediaQuery
ウィジェットを使用すればよかったんですよね。
第3章セクション11の最後に記述してありました。
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part16 基本的なウィジェット
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>[
Container(
child: Text(w.toString()),
),
Align(
alignment: Alignment.centerRight,
widthFactor: 4, // centerRightなので右側に埋まることはありません。
child: SizedBox(
width: 100,
height: 100,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.greenAccent),
))),
]),
));
}
}
私が使用しているエミュレータ端末では横幅392.727272…でしたので100分の1してみて約です。
4を指定しましたがalignment
プロパティでAlignment.centerRight
を指定していたので右に埋まることはありませんでした。
最後に
久しぶりに?な文章に出会えて安心しました!
あまり変化のないプロパティの学習ばかりが続いているのでちょっと癒しになりました。
今日はここまで!
参考
Flutterで画面サイズや向きを取得する(MediaQuery/OrientationBuilder) – くらげになりたい。 (memory-lovers.blog)
ディスカッション
コメント一覧
まだ、コメントがありません