How To Use Flow Widget Using Flutter Android Ios App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

Flutter provide a wide range of widgets to customize your layout, most of which can be found here. However if you are like me and you don’t want to miss anything related to flutter you probably have seen a few interesting widget names. In this article I will be talking about one of these widgets,the flow widget.

How To Use Flow Widget Using Flutter Android Ios App

Flow Widget
Complete Code For Flow Widget In Flutter
main.dart


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
          title: Text("Flow Widget"
          )),
      body: Center(
        child: Flow(
          delegate: _MyFlowDelegate(),
          children: <Widget>[
            _buildContainer(),
            _buildContainer(),
            _buildContainer(),
            _buildContainer(),
            _buildContainer(),
          ],
        ),
      ),
    );
  }

  Widget _buildContainer() {
    return Padding(
      padding: const EdgeInsets.only(left:25.0),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 8.0, top: 8.0,left: 10),
            height: 50.0,
            width: 50.0,
            color: Colors.lightGreen[900],
          ),
          Container(
            margin: EdgeInsets.only(bottom: 8.0, top: 8.0,left: 10),
            height: 24.0,
            width: 40.0,
            color: Colors.lightGreen[700],
          ),
          Container(
            margin: EdgeInsets.only(bottom: 8.0, top: 8.0,left: 10),
            height: 45.0,
            width: 50.0,
            color: Colors.lightGreen[500],
          ),
          Container(
            margin: EdgeInsets.only(bottom: 8.0, top: 8.0,left: 10),
            height: 45.0,
            width: 50.0,
            color: Colors.lightGreen[300],
          ),
          Container(
            margin: EdgeInsets.only(bottom: 8.0, top: 8.0,left: 10),
            height: 65.0,
            width: 23.0,
            color: Colors.lightGreen[100],
          ),
        ],
      ),
    );
  }
}

class _MyFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    double dy = 0.0;
    double opacity = 0.2;
    for (int i = 0; i < context.childCount; ++i) {
      dy = context.getChildSize(i).height * i;

      context.paintChild(
        i,
        transform: Matrix4.translationValues(
          0,
          dy * 0.7,
          0,
        ),
      );
    }
  }
  @override
  bool shouldRepaint(_MyFlowDelegate oldDelegate) {
    return false;
  }
}

class FlowDeg extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    int count = context.childCount;
    context.paintChild(0, opacity: .2);
    context.paintChild(1, opacity: .4);
    context.paintChild(2, opacity: .6);
    context.paintChild(3, opacity: .8);
    context.paintChild(4);
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return true;
  }
}

Related Post