【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part38 Single-child layout widgets
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part38 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part37 Single-child layout widgets
引き続き、Single-child layout widgetsについて学びます。
Single-child layout widgets
LayoutBuilderウィジェット
LayoutBuilder
ウィジェットは画面表示する前にウィジェットのサイズを知り、をウィジェットのレイアウトを決める場合に使用します。
** 画面表示をする前に ** とな?それって普通のことなのでは・・と思う素人の私です(笑
インターネットを探し、サンプルを見つけました!
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("LayoutBuilder Example")),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return _buildWideContainers();
} else {
return _buildNormalContainer();
}
},
),
);
}
Widget _buildNormalContainer() {
return Center(
child: Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
);
}
Widget _buildWideContainers() {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
),
],
),
);
}
}
エミュレータの縦横を変えると・・・。
なにも変化なし😥
本当は表示が変わるらしいのですがなぜなのか。
最後に
効果がわからないままですが仕方なし!
今日はここまで!
参考
2021/2/13 LayoutBuilder classの訳 | 今、プログラミングを学ぶ (okutaro.com)
ディスカッション
コメント一覧
まだ、コメントがありません