GridView appear animation

0

I am new to flutter 💘 🤓

I am learning and have made this layout.

Structure of the layout:

    App
    │
    └── MaterialApp
        │
        └── Scaffold
            │
            └── AppBar
            │
            └── TabBar
            │   │
            │   └── Tab
            │
            └── Container
                │
                └── Expanded
                │   │
                │   └── TabBarView
                │       │
                │       └── Container
                │           │
                │           └── GridView
                │
                └── Container
                    │
                    └── Column
                        │
                        └── Row
                            │
                            └── CircularButton(A)
                            │
                            └── CircularButton(B)

I want to animate the GridView when the layout is first generating, and when the user selecting the CircularButton(which is regenerating the GridView). How to achieve this animation?

enter image description here

The code I have so far:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> with SingleTickerProviderStateMixin {

  List<String> data = DataClass.dataOne;
  static String selectedData = 'A';

  final List<Tab> myTabs = <Tab>[
    Tab(
      text: 'SELECTED DATA $selectedData',
    ),
  ];

  List<bool> currentSelectedList = DataClass.dataTwo;

  List<bool> changeSelection() {
    return currentSelectedList;
  }

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GridView Test',
      theme: ThemeData(
        primaryColor: Color(0xFFD0021B),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'GridView Test',
            style: TextStyle(
              fontFamily: 'Roboto',
            ),
          ),
          bottom: TabBar(
            controller: _tabController,
            tabs: <Tab>[
              Tab(
                text: 'SELECTED DATA $selectedData',
              ),
            ],
            indicatorColor: Colors.white,
          ),
        ),
        body: Container(
          color: Color(0xFFD0021B),
          child: Column(
            children: <Widget>[
              Expanded(
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    Container(
                      child: Grid(changeSelection()),
                    ),
                  ],
                ),
              ),
              Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        circleButton(DataClass.dataOne[0]),
                        circleButton(DataClass.dataOne[1]),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget circleButton(String type) {

    return Padding(
      padding: const EdgeInsets.only(top: 8.0, bottom: 10.0),
      child: FloatingActionButton(
        onPressed: () {
          setState(() {
            switch (type) {
              case 'A':
                selectedData = DataClass.dataOne[0];
                currentSelectedList = DataClass.dataTwo;
                break;
              case 'B':
                selectedData = DataClass.dataOne[1];
                currentSelectedList = DataClass.dataThree;
                break;
            }
          });
        },
        child: Text(
          type,
          style: TextStyle(
            fontFamily: 'Roboto',
            fontSize: 25.0,
            color: Color(0xFFD0021B),
          ),
        ),
        backgroundColor: Colors.white,
      ),
    );
  }

}

class DataClass {
  static List<String> dataOne = ['A', 'B'];

  static List<bool> dataTwo = [true, false, true, false, true, false, true, false];
  static List<bool> dataThree = [true, true, true, true, true, true, true, true];
}

class Grid extends StatelessWidget {
  Grid(this.available);
  final List<bool> available;
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      children: <Widget>[
        Tile(DataClass.dataOne[0], available[0]),
        Tile(DataClass.dataOne[1], available[1]),
        Tile(DataClass.dataOne[0], available[2]),
        Tile(DataClass.dataOne[1], available[3]),
        Tile(' ', true),
        Tile(DataClass.dataOne[0], available[4]),
        Tile(DataClass.dataOne[1], available[5]),
        Tile(DataClass.dataOne[0], available[6]),
        Tile(DataClass.dataOne[1], available[7]),
      ],
      crossAxisCount: 3,
      crossAxisSpacing: 20.0,
      primary: false,
      padding: const EdgeInsets.all(20.0),
      mainAxisSpacing: 1.0,
    );
  }
}

class Tile extends StatelessWidget {
  Tile(this.data, this.enabled);
  final data;
  final enabled;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: FloatingActionButton(
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        onPressed: () {},
        child: data.contains(' ')
            ? Icon(
          Icons.all_out,
          color: Color(0xFF820111),
          size: 50.0,
        )
            : Text(
          data,
          style: TextStyle(
            fontFamily: 'Roboto',
            fontSize: 25.0,
            color: enabled ? Theme.of(context).primaryColor : Color(0xFFFFFFFF),
          ),
        ),
        backgroundColor: enabled ? Color(0xFFFFFFFF) : Color(0xFF999999),
      ),
    );
  }
}
flutter
flutter-layout
flutter-animation
flutter-gridview
asked on Stack Overflow Mar 3, 2019 by Aby Mathew • edited Mar 3, 2019 by Aby Mathew

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0