Basic Flutter layout concepts

Flutter は、UI が (たとえば) XML ファイルまたは類似のコードではなく、コードで構築されているため、他のフレームワークとは異なります。ウィジェット(Widget)は、フラッター UI の基本的な構成要素です。このコードラボを進めるにつれて、Flutterのほとんどすべてがウィジェットであることを学びます。ウィジェットは、UI の特定の部分を記述するimmutable(不変な)オブジェクトです。また、Flutter ウィジェットは、既存のウィジェットを組み合わせてより洗練されたウィジェットを作成できることを意味し、組み合わせ可能であることを学びます。このコードラボの最後に、名刺を表示する Flutter UI の構築に、学習した内容を適用します。

Row and Column classes

RowウィジェットとColumnウィジェットは、複数のウィジェットをレイアウトするためのウィジェットです。

RowウィジェットとColumnウィジェットはchildrenプロパティを持っています。

RowとColumnはchildrenプロパティに設定されたウィジェットの親ウィジェットと見なされます。

Rowウィジェットはchildrenのウィジェットを水平方向にレイアウト(配置)します。

Columnウィジェットは垂直方向にレイアウト(配置)します。

sample1-1

//sample1-1
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

sample1-1(result)

sample1-2

//sample1-2
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GreenBox(),
        GreenBox(),
        GreenBox(),
      ],
    );
  }
}

class GreenBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.green,
        border: Border.all(),
      ),
    );
  }
}

sample1-2(result)

参考

https://flutter.dev/docs/codelabs/layout-basics

https://flutter.dev/docs/codelabs/layout-basics#row-and-column-classes