Flutter - How to change images in another widget with a button?-CodePudding

I wish to change an image with other images when a corresponding button is pressed. How can I do this?

I have tried to create a variable which contains a list of images and my intent was to use an index to locate the desired image and then render the new image in the car.dart file.

(Basically The user gets to choose the wheels on their car.)

Eventually I would have lots of wheels to choose from so that's my logic behind using a list and it's index.

I'm open to other suggestions.

So far I have:

Main.dart:

import 'package:flutter/material.dart';

import './car.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            car(),
            SizedBox(
              height: 50,
            ),
            ElevatedButton(
                onPressed: null,
                child: Text('Wheel 1')),
            ElevatedButton(
                onPressed: null,
                child: Text('Wheel 2')),
          ],
        ),
      ),
    );
  }
}

car.dart:

import 'package:flutter/material.dart';

class car extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return carState();
  }
}

class carState extends State<car> {
  
  @override
  Widget build(BuildContext context) {
    var wheelImage = [
      Image.asset('assets/wheel1.png'),
      Image.asset('assets/wheel2.png'),
    ];
    return Stack(
      children: [
        Image.asset('assets/golf.png'), //car
        wheelImage[0], //wheel
      ],
    );
  }
}

I have tried to use onPressed: setState but I just kept getting errors. Buttons are null for now because I have no idea how to move forward.

I'm really unsure about the best way to go about this.

I would be very grateful for the help and I'm sorry if this seems like a really moronic question... I'm new to the flutter scene.

CodePudding user response：

You can create an int variable to have and pass selected index on car class and update the images. And use on car class like widget.intSlectedIndex. Also, you can learn more about state management for future .


class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            car(
              intSlectedIndex: _selectedIndex,
            ),
            SizedBox(
              height: 50,
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    _selectedIndex = 0;
                  });
                },
                child: Text('Wheel 1')),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    _selectedIndex = 1;
                  });
                },
                child: Text('Wheel 2')),
          ],
        ),
      ),
    );
  }
}

class car extends StatefulWidget {
  final int intSlectedIndex;

  const car({Key? key, required this.intSlectedIndex}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return carState();
  }
}

class carState extends State<car> {
  @override
  Widget build(BuildContext context) {
    var wheelImage = [
      Image.asset('assets/images/p7_image_asset.jpeg'),
      Image.asset('assets/images/p8_image_asset.jpeg'),
    ];
    return Stack(
      children: [
        Image.asset('assets/images/p9_image_asset.jpeg'), //car
        wheelImage[widget.intSlectedIndex], //wheel
      ],
    );
  }
}