【Flutter】verticalDirectionプロパティの使い方|VerticalDirection

verticalDirection使い方
目次

verticalDirectionプロパティとは?

Column(
  verticalDirection: VerticalDirection.up,
  children: [ 
    Text('Hello World'),
    Text('Hello World 2'),
    Text('Hello World 3'),
 ],

verticalDirectionプロパティは、ColumnやRowなどのプロパティで使われ、y軸におけるchildrenの配置される方向(上からまたは下から)を指定します。また、verticalDirectionの引数にVerticalDirectionを使います。

>>【Flutter】Widgetの基本的な仕組み/使い方

VerticalDirectionの基本的な使い方

VerticalDirection.down

VerticalDirection.down

childrenを上から順に配置します。

Columnの場合

VerticalDirection.up

VerticalDirection.up

childrenを下から順に配置します。

Columnの場合

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Column(
          verticalDirection: VerticalDirection.up,
          children: [
            Container(
              width: double.infinity,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}
よかったらシェアしてね!
目次
閉じる