【Flutter】​Flowで実現！スムーズなUI変更

Flow(
  delegate: CustomFlowDelegate(),
  children: <Widget>[
    // ここに子ウィジェットを追加
  ],
)

class CustomFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    // ここで子ウィジェットの描画を制御
  }

  @override
  bool shouldRepaint(covariant FlowDelegate oldDelegate) {
    // 再描画が必要かどうかを返す
    return true;
  }
}

AnimationController _controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

@override
Widget build(BuildContext context) {
  return Flow(
    delegate: CustomFlowDelegate(_controller),
    children: <Widget>[
      // 子ウィジェット
    ],
  );
}

class CustomFlowDelegate extends FlowDelegate {
  final Animation<double> animation;

  CustomFlowDelegate(this.animation) : super(repaint: animation);

  @override
  void paintChildren(FlowPaintingContext context) {
    // アニメーションに基づいて子ウィジェットの位置やサイズを変更
  }

  @override
  bool shouldRepaint(covariant CustomFlowDelegate oldDelegate) {
    return animation != oldDelegate.animation;
  }
}

@override
void paintChildren(FlowPaintingContext context) {
  for (int i = 0; i < context.childCount; ++i) {
    context.paintChild(i, transform: Matrix4.translationValues(x, y, 0));
  }
}

@override
void paintChildren(FlowPaintingContext context) {
  double dx = 0.0;
  for (int i = 0; i < context.childCount; ++i) {
    context.paintChild(
      i,
      transform: Matrix4.translationValues(dx * controller.value, 0, 0),
    );
    dx += context.getChildSize(i)!.width + 10;
  }
}

@override
bool shouldRepaint(covariant CustomFlowDelegate oldDelegate) {
  // 再描画が必要な条件を記述
  return oldDelegate.someValue != someValue;
}

return AnimatedBuilder(
  animation: _controller,
  builder: (context, child) {
    return Flow(
      delegate: CustomFlowDelegate(_controller.value),
      children: <Widget>[
        // 子ウィジェット
      ],
    );
  },
);

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Flow Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late final _controller = AnimationController(
    duration: const Duration(milliseconds: 300),
    vsync: this,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Flow Demo'),
      ),
      body: Flow(
        delegate: MyFlowDelegate(_controller),
        children: <Widget>[
          Container(width: 80, height: 80, color: Colors.red),
          Container(width: 80, height: 80, color: Colors.green),
          Container(width: 80, height: 80, color: Colors.blue),
          Container(width: 80, height: 80, color: Colors.yellow),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.isCompleted) {
            _controller.reverse();
          } else {
            _controller.forward();
          }
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

class MyFlowDelegate extends FlowDelegate {
  MyFlowDelegate(this.controller) : super(repaint: controller);

  final Animation<double> controller;

  @override
  void paintChildren(FlowPaintingContext context) {
    double dx = 0.0;
    for (int i = 0; i < context.childCount; ++i) {
      context.paintChild(
        i,
        transform: Matrix4.translationValues(dx * controller.value, 0, 0),
      );
      dx += context.getChildSize(i)!.width + 10;
    }
  }

  @override
  bool shouldRepaint(covariant MyFlowDelegate oldDelegate) {
    return controller != oldDelegate.controller;
  }
}

import 'package:flutter/material.dart';
import 'dart:math' as math;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flow Widget Example')),
        floatingActionButton: FlowWidgetExample(),
      ),
    );
  }
}

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

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

class _FlowWidgetExampleState extends State<FlowWidgetExample>
    with SingleTickerProviderStateMixin {
  final icons = [
    Icons.search,
    Icons.settings,
    Icons.bed,
    Icons.phone,
    Icons.email
  ];

  late final _controller = AnimationController(
    duration: const Duration(milliseconds: 100),
    vsync: this,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Flow(
      delegate: FlowMenuDelegate(_controller),
      children: <Widget>[
        buildItem(
          Icons.menu,
          () {
            if (_controller.isCompleted) {
              _controller.reverse();
            } else {
              _controller.forward();
            }
          },
        ),
        ...icons
            .map((icon) => buildItem(icon, () => print(icon.toString())))
            .toList(),
      ],
    );
  }

  Widget buildItem(IconData icon, void Function() onPressed) {
    return FilledButton(
      onPressed: onPressed,
      style: FilledButton.styleFrom(
        shape: const CircleBorder(),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Icon(icon),
      ),
    );
  }
}

class FlowMenuDelegate extends FlowDelegate {
  static const buttonSize = 56.0;
  static const margin = 8.0;

  final Animation<double> controller;

  FlowMenuDelegate(this.controller) : super(repaint: controller);

  @override
  void paintChildren(FlowPaintingContext context) {
    final size = context.size;

    // 画面中央
    final double xStart = size.width / 2 - buttonSize / 2;

    // 画面の下の方
    final double yStart = size.height - buttonSize;

    for (int i = context.childCount - 1; i >= 0; i--) {
      final childSize = context.getChildSize(i)!.width;
      final dx =
          i == 0 ? 0 : (childSize + margin) * (math.cos(math.pi * (i - 1) / 4));
      final dy =
          i == 0 ? 0 : (childSize + margin) * (math.sin(math.pi * (i - 1) / 4));
      final x = xStart + dx * controller.value;
      final y = yStart - dy * controller.value;
      context.paintChild(
        i,
        transform: Matrix4.translationValues(x, y, 0),
      );
    }
  }

  @override
  bool shouldRepaint(covariant FlowMenuDelegate oldDelegate) {
    return controller != oldDelegate.controller;
  }
}