【Flutter開発】ウィジェットの位置を自由に決定する

　今回のゴール

・ウィジェットの位置を固定するやり方を知る

【ウィジェットとは】

Flutterにおいて、アップバーやテキスト、アイコンなどを構成するためのものをウィジェットと言います。

【配置の仕方】

・Stackを使用して、複数のウィジェットを生成

body: Stack(
  children: const <Widget>[
    //テキストとかいろいろ配置
  ],
),

・ポジションを設定して、ウィジェットを呼び出す

topやleftで位置を指定し、widthやheightで大きさを指定します。
この部分のコードは上記の「//テキストとかいろいろ配置」というところに書きます。

Positioned(
  top: 10.0,
  left: 10.0,
  width: 100.0,
  height: 100.0,
  child: WidgetB(),
),

・呼び出し先のウィジェットクラスを作成

alignmentの値を変えると、テキストの位置が変更できる。

class WidgetB extends StatelessWidget{
  const WidgetB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return Container(
      alignment: const Alignment(0.0, 0.0),
      color: Colors.red,
      child: const Text('WidgetB'),
    );
  }
}

これらを実行すると以下のようにウィジェットの位置や文字位置を変えたものが作成できます。

全体のコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'about widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const StackSample(),
    );
  }
}

class StackSample extends StatefulWidget {
  const StackSample({Key? key}) : super(key: key);

  @override
  _StackSampleState createState() => _StackSampleState();
}

class _StackSampleState extends State<StackSample>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: const Text('Appbar is here'),
      ),
      body: Stack(
        children: const <Widget>[
          WidgetA(),
          Positioned(
            top: 10.0,
            left: 10.0,
            width: 100.0,
            height: 100.0,
            child: WidgetB(),
          ),
          Positioned(
            top: 400.0,
            left: 200.0,
            width: 100.0,
            height: 200.0,
            child: WidgetC(),
          ),
        ],
      ),
    );
  }
}

class WidgetA extends StatelessWidget{
  const WidgetA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return Container(
      alignment: const Alignment(0.0, 0.0),
      color: Colors.white30,
      child: const Text('WidgetA'),
    );
  }
}

class WidgetB extends StatelessWidget{
  const WidgetB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return Container(
      alignment: const Alignment(0.0, 0.0),
      color: Colors.red,
      child: const Text('WidgetB'),
    );
  }
}

class WidgetC extends StatelessWidget{
  const WidgetC({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return Container(
      alignment: const Alignment(1.0, 0.0),
      color: Colors.green,
      child: const Text('WidgetC'),
    );
  }
}

まとめ

この応用としてボタンやテキスト位置を自由に配置し、簡素なアプリを作成することができそうです。