How to make Toggle Selected Image in Flutter? - flutter

Question

I've tried several tutorials to create layouts like this, but they always fail.
maybe someone can help here

Answer 1

Can you please elaborate a bit more? As far as I know there is no direct way to make this. What you would need is to have a variable selectedImageIndex and you would have 2 "images" for each image, one that is highlighted and one that isn't and then you would write something like
child: selectedImageIndex == 1? HighlightedImage():NonHighLightedImage
and each image would be wrapped with a Gesture Detector so that when you tap it the selectedImageIndex changes. But again, that would mean that you have both versions of the image (or you have to manually somehow highlight it, or if it's an icon perhaps change color of icon. Please do provide more details
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(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int selected;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.school),
color: (selected != null && selected == 0)
? Colors.blue
: Colors.grey,
onPressed: () {
setState(() {
selected = 0;
});
},
),
IconButton(
icon: Icon(Icons.school),
color: (selected != null && selected == 1)
? Colors.blue
: Colors.grey,
onPressed: () {
setState(() {
selected = 1;
});
},
)
],
),
),
);
}
}

Answer 2

Do let me know if it didn't work.
int _selectedA = 1, _selectedB = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildCircleA(icon: Icons.bluetooth, selection: 1),
_buildCircleA(icon: Icons.bluetooth_disabled, selection: 2),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildCircleB(icon: Icons.mail, selection: 1),
_buildCircleB(icon: Icons.mail_outline, selection: 2),
],
)
],
),
),
);
}
Widget _buildCircleA({IconData icon, int selection}) {
return GestureDetector(
onTap: () => setState(() => _selectedA = selection),
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: _selectedA == selection ? Colors.blue : Colors.transparent, width: 2),
),
child: Icon(icon, size: 56, color: _selectedA == selection ? Colors.blue : null),
),
);
}
Widget _buildCircleB({IconData icon, int selection}) {
return GestureDetector(
onTap: () => setState(() => _selectedB = selection),
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: _selectedB == selection ? Colors.blue : Colors.transparent, width: 2),
),
child: Icon(icon, size: 56, color: _selectedB == selection ? Colors.blue : null),
),
);
}