Last active
March 11, 2021 02:22
-
-
Save r100-stack/73df67d0a0013ec671367c0b0883908a to your computer and use it in GitHub Desktop.
Sample Flutter Toggle Selector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| // This widget is the root of your application. | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Flutter Demo', | |
| debugShowCheckedModeBanner: false, | |
| theme: ThemeData( | |
| primarySwatch: Colors.red, | |
| ), | |
| home: MyHomePage(), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends StatefulWidget { | |
| @override | |
| _MyHomePageState createState() => _MyHomePageState(); | |
| } | |
| class _MyHomePageState extends State<MyHomePage> { | |
| int _selectedIndex = -1; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar(), | |
| body: Wrap( | |
| children: List.generate(30, (index) { | |
| return ButtonTab( | |
| isSelected: _selectedIndex == index, | |
| onTap: () => setState(() { | |
| _selectedIndex = _selectedIndex != index ? index : -1; | |
| }), | |
| ); | |
| }).toList(), | |
| )); | |
| } | |
| } | |
| class ButtonTab extends StatelessWidget { | |
| final isSelected; | |
| final onTap; | |
| const ButtonTab({this.isSelected, this.onTap}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return GestureDetector( | |
| onTap: onTap, | |
| child: Container( | |
| margin: const EdgeInsets.all(5.0), | |
| height: 50, | |
| width: 50, | |
| color: isSelected ? Colors.red : Colors.grey, | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment