Problem:
I have a GridView of small images, when the user taps on them it needs to change the background image on a different screen.
Here is the Homepage screen with the background image:
class HomePage extends StatelessWidget {
Image defaultImage;
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text('Background Image', style: TextStyle(
color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold),
),
iconTheme: IconThemeData(color: Colors.white),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings, color: Colors.black,),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SmallImages()),
);
},
),
],
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Stack(
children: <Widget>
[
Positioned.fill(
child: GestureDetector(
child: defaultImage = Image.asset('images/background_image.jpeg', fit: BoxFit.fill),
),
),
],
),
);
}
}
Here is the SmallImage screen where the user can click on a small image and it would change the background image on the HomePage. The background image would then have a different image for example 'defaultImage = Image.asset('images/background_image25.jpeg', fit: BoxFit.fill)'
class SmallImages extends StatefulWidget {
static int tappedGestureDetector = 0;
@override
_SmallImagesState createState() => _SmallImagesState();
}
class _SmallImagesState extends State<SmallImages> {
List<bool> isSelected;
void initState() {
isSelected = [true, false, false, false, false, false, false, false, false];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Small Image', style: TextStyle(
color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold),
),
iconTheme: IconThemeData(color: Colors.white),
actions: <Widget>[
IconButton(
icon: Icon(Icons.arrow_left, color: Colors.black,),
onPressed: () {
Navigator.pop(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
),
],
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Material(
child: GestureDetector(
child: MaterialApp(
builder: (context, snapshot) {
return GridView.count(
crossAxisCount: 1,
childAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 0.0,
crossAxisSpacing: 0.0,
children: [
GridView(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,
childAspectRatio: MediaQuery
.of(context)
.size
.width /
(MediaQuery
.of(context)
.size
.height / 2),
),
children: [
GestureDetector(
onTap: () {
setState(() {
SmallImages.tappedGestureDetector = 2;
}); // <-- replaced 'tapped' and 'other'
},
child: Container(
height: 100,
width: 107,
decoration: BoxDecoration(border: SmallImages
.tappedGestureDetector == 2 ? Border.all(
color: Color(0xff2244C7), width: 1.0) : Border
.all(color: Colors.transparent,),),
child: Image.asset('images/smallImage1.png',
),
),
),
GestureDetector(
onTap: () {
setState(() {
SmallImages.tappedGestureDetector = 3;
}); // <-- replaced 'tapped' and 'other'
},
child: Container(
height: 100,
width: 107,
decoration: BoxDecoration(border: SmallImages
.tappedGestureDetector == 3 ? Border.all(
color: Color(0xff2244C7), width: 1.0) : Border
.all(color: Colors.transparent,),),
child: Image.asset('images/smallImage2.png',
),
),
),
GestureDetector(
onTap: () {
setState(() {
SmallImages.tappedGestureDetector = 4;
}); // <-- replaced 'tapped' and 'other'
},
child: Container(
height: 100,
width: 107,
decoration: BoxDecoration(border: SmallImages
.tappedGestureDetector == 4 ? Border.all(
color: Color(0xff2244C7), width: 1.0) : Border
.all(color: Colors.transparent,),),
child: Image.asset('images/smallImage3.png',
),
),
),
].toList(),
),
],
);
}),
),
),
);
}
}