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?
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),
),
);
}
}
User contributions licensed under CC BY-SA 3.0