Я новичок во флаттере ? ?
Я учусь и сделал этот макет.
Структура макета:
App
│
└── MaterialApp
│
└── Scaffold
│
└── AppBar
│
└── TabBar
│ │
│ └── Tab
│
└── Container
│
└── Expanded
│ │
│ └── TabBarView
│ │
│ └── Container
│ │
│ └── GridView
│
└── Container
│
└── Column
│
└── Row
│
└── CircularButton(A)
│
└── CircularButton(B)
Я хочу анимировать GridView, когда макет впервые генерируется, и когда пользователь выбирает CircularButton (который регенерирует GridView).Как добиться этой анимации?
Код, который у меня пока есть:
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),
),
);
}
}