【 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)