[Flutter]Flutter Widget of the Week「#49 Stack」、「#50 AnimatedOpacity」、「#51 FractionallySizedBox」

はじめに

前回はFlutter Widget of the Weekの「#46 IndexedStack」、「#47 Semantics」、「#48 ConstrainedBox」を紹介しました。

今回はその続きで「#49 Stack」、「#50 AnimatedOpacity」、「#51 FractionallySizedBox」の3つです。

前回の記事はこちら

Flutter Widget of the Week

環境

Flutter 3.0.4

記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。

#49 Stack

Stackとは

ウィジェットとウィジェットを重ねたいときに、Stackを使います。

またPositionedウィジェット合わせて使うことで特定の位置にウィジェットをずらすこともできます。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage049 extends StatelessWidget {
  const SamplePage049({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Stack(
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.red,
                  ),
                  Container(
                    width: 90,
                    height: 90,
                    color: Colors.green,
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    color: Colors.blue,
                  ),
                  Container(
                    width: 70,
                    height: 70,
                    color: Colors.yellow[700],
                  ),
                ],
              ),
              const SizedBox(height: 20),
              Stack(
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.grey,
                  ),
                  Positioned(
                    bottom: -50,
                    right: -50,
                    child: Container(
                      width: 80,
                      height: 80,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              Stack(
                clipBehavior: Clip.none,
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.grey,
                  ),
                  Positioned(
                    bottom: -50,
                    right: -50,
                    child: Container(
                      width: 80,
                      height: 80,
                      color: Colors.red,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

結果

動画

公式リファレンス

Stack class - widgets library - Dart API

API docs for the Stack class from the widgets library, for the Dart programming language.

#50 AnimatedOpacity

AnimatedOpacityとは

ウィジェットをフェードイン、フェードアウトさせたい時などの透明度をアニメーションさせたいときに使うウィジェットです。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage050 extends StatefulWidget {
  const SamplePage050({
    super.key,
  });

  @override
  State<SamplePage050> createState() => _SamplePage050State();
}

class _SamplePage050State extends State<SamplePage050> {
  bool _enable = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: AnimatedOpacity(
          opacity: _enable ? 1.0 : 0,
          duration: const Duration(seconds: 1),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const FlutterLogo(
                  size: 256,
                ),
                const SizedBox(height: 20),
                Text(
                  'Hello!',
                  style: TextStyle(
                    color: Colors.blue[900],
                    fontSize: Theme.of(context).textTheme.headline2!.fontSize,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _enable = !_enable;
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

結果

動画

公式リファレンス

AnimatedOpacity class - widgets library - Dart API

API docs for the AnimatedOpacity class from the widgets library, for the Dart programming language.

#51 FractionallySizedBox

FractionallySizedBoxとは

ウィジェットを画面の相対的なサイズにしたい場合にこのFractionallySizedBoxを使います。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage051 extends StatelessWidget {
  const SamplePage051({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FractionallySizedBox'),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FractionallySizedBox(
                widthFactor: 0.7,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('70%'),
                ),
              ),
              const Flexible(
                child: FractionallySizedBox(
                  heightFactor: 0.1,
                ),
              ),
              FractionallySizedBox(
                widthFactor: 0.5,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('50%'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}