Building Selectable Containers in Flutter
Are you looking to add a touch of elegance to your Flutter application by creating selectable containers with different colors? Look no further! This tutorial will guide you through the process of building a selectable container using Flutter’s GestureDetector widget.
Getting Started
To begin, create a new Flutter project and add the necessary dependencies. We will be using three Dart files: main.dart, gridview_itemview.dart, and gridcontainer.dart.
Building the Interface
In main.dart, create a stateless widget called MyApp and override the build function. Return a MaterialApp with the title and home set to the stateful widget in gridcontainer.dart.
dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Selectable Containers',
home: GridContainer(),
);
}
}
In gridview_itemview.dart, create a stateless widget called GridViewItemView with constructor variables for the title, color, and onTap callback.
“`dart
class GridViewItemView extends StatelessWidget {
final String title;
final Color color;
final VoidCallback onTap;
GridViewItemView({this.title, this.color, this.onTap});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(title),
],
),
),
);
}
}
“`
In gridcontainer.dart, create a stateful widget called GridContainer. Use the Scaffold widget and add an AppBar and a GridView to the body.
“`dart
class GridContainer extends StatefulWidget {
@override
_GridContainerState createState() => _GridContainerState();
}
class _GridContainerState extends State
List
Color selectedColor;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Selectable Containers’),
),
body: GridView.count(
crossAxisCount: 3,
children: colors.map((color) {
return GestureDetector(
onTap: () {
setState(() {
selectedColor = color;
});
},
child: GridViewItemView(
title: color.toString(),
color: color,
onTap: () {
setState(() {
selectedColor = color;
});
},
),
);
}).toList(),
),
);
}
}
“`
Implementing the Functionality
To make the containers selectable, we need to implement two functionalities: inactive container and background color change.
Inactive Container
Create a new variable inactiveColor and assign a darker shade of the original color to it. Use the if statement to check if the selected color is equal to the original color. If true, change the color to the inactive color.
“`dart
class _GridContainerState extends State
List
Color selectedColor;
Color inactiveColor;
@override
void initState() {
super.initState();
inactiveColor = Colors.grey;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Selectable Containers’),
),
body: GridView.count(
crossAxisCount: 3,
children: colors.map((color) {
return GestureDetector(
onTap: () {
setState(() {
if (selectedColor == color) {
selectedColor = inactiveColor;
} else {
selectedColor = color;
}
});
},
child: GridViewItemView(
title: color.toString(),
color: color,
onTap: () {
setState(() {
if (selectedColor == color) {
selectedColor = inactiveColor;
} else {
selectedColor = color;
}
});
},
),
);
}).toList(),
),
);
}
}
“`
Background Color Change
Use the if statement to check if the selected color is equal to the original color. If true, change the background color to the selected color.
“`dart
class _GridContainerState extends State
List
Color selectedColor;
Color inactiveColor;
Color backgroundColor;
@override
void initState() {
super.initState();
inactiveColor = Colors.grey;
backgroundColor = Colors.white;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Selectable Containers’),
),
body: GridView.count(
crossAxisCount: 3,
children: colors.map((color) {
return GestureDetector(
onTap: () {
setState(() {
if (selectedColor == color) {
selectedColor = inactiveColor;
backgroundColor = Colors.white;
} else {
selectedColor = color;
backgroundColor = color;
}
});
},
child: GridViewItemView(
title: color.toString(),
color: color,
onTap: () {
setState(() {
if (selectedColor == color) {
selectedColor = inactiveColor;
backgroundColor = Colors.white;
} else {
selectedColor = color;
backgroundColor = color;
}
});
},
),
);
}).toList(),
),
);
}
}
“`
That’s it! You have now implemented a selectable container using Flutter’s GestureDetector widget. You can customize the appearance and behavior of the container as per your requirements.