Skip to content

Instantly share code, notes, and snippets.

@graphicbeacon
Last active June 26, 2020 09:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save graphicbeacon/ebaa27658b740188ce9ac307e9c63297 to your computer and use it in GitHub Desktop.
Save graphicbeacon/ebaa27658b740188ce9ac307e9c63297 to your computer and use it in GitHub Desktop.
Flutter Grid example with highlighted square
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false, home: Scaffold(body: BoxApp())));
}
class BoxApp extends StatefulWidget {
@override
BoxAppState createState() => BoxAppState();
}
class BoxAppState extends State<BoxApp> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
int selectedTileIndex = 0;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
_animation = Tween<double>(begin: 0, end: 7).animate(_controller)
..addListener(() {
setState(() {
if (_animation.isCompleted) {
_controller.reverse();
} else if (_animation.value == 0) {
_controller.forward();
}
});
});
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: GridView.count(
padding: const EdgeInsets.all(10),
crossAxisCount: 8,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: List.generate(
64,
(index) => GestureDetector(
onTap: () {
setState(() {
selectedTileIndex = index;
});
},
child: Container(
// width: 100,
// height: 100,
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.green,
width: index == selectedTileIndex ? _animation.value : 0),
),
),
),
)));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment