Flutter - State Management and Providers-CodePudding

I am really struggling to get my head around state management. I understand that I can use Providers to pass this data to widgets with listeners but I can't seem to get anything working.

So far I have created a simple example where the user can change the wheels on a car. The images for the wheels have been stored in a list.

Is it possible to use a provider to access the index of the list and change the outcome accordingly?

I have added Providers in the dependencies of the pubspec.yaml.

main:

import 'package:flutter/material.dart';

import './car.dart';
import './buttons.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,
            ),
            Buttons(),
          ],
        ),
      ),
    );
  }
}

Car:

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

Buttons:

import 'package:flutter/material.dart';

class Buttons extends StatelessWidget {
  const Buttons({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        ElevatedButton(onPressed: null, child: Text('Wheel 1')),
        ElevatedButton(onPressed: null, child: Text('Wheel 2')),
      ],
    );
  }
}

Provider initial attempt:

import 'package:flutter/material.dart';

class WheelCounter with ChangeNotifier {
  int _count = 0;
  
  void wheel1Choose() {
    _count = 0;
  }
  void wheel2Choose() {
    _count = 1;
  }
}

Where would I go about adding the provider code in this example?

CodePudding user response：

create your main as:

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => WheelProvider()),
      ],
      child: MyApp(),
    ),
  );
}

your wheel provider class will look like:

class WheelProvider extends ChangeNotifier{

  int _selectedId = 0;

  int get selectedId{
    return _selectedId;
  }

  void setId(int id){
    _selectedId = id;
    notifyListeners();
  }
}

your car class can be:

class car extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
   final wheelProvider =Provider.of<WheelProvider>(context);
    var wheelImage = [
      Image.asset('assets/wheel1.png'),
      Image.asset('assets/wheel2.png'),
    ];
    return Stack(
      children: [
        Image.asset('assets/golf.png'), //car
        wheelImage[wheelProvider.selectedId], //wheel
      ],
    );
  }
}

finally your button class to :

    class Buttons extends StatelessWidget {
      const Buttons({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
final wheelProvider =
        Provider.of<wheelProvider>(context, listen: false);
        return Row(
          children: [
            ElevatedButton(onPressed: (){wheelProvider.setId(0)}, child: Text('Wheel 1')),
            ElevatedButton(onPressed: (){wheelProvider.setId(1)}, child: Text('Wheel 2')),
          ],
        );
      }
    }

this is a basic flow for your provider.