How do I change the background image that is on a different screen with OnTap in Flutter?

432 views Asked by At

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(),
                    ),
                  ],
                );
              }),
        ),
      ),
    );
  }
}
0

There are 0 answers