Dasun Dola
Dasun Dola

Reputation: 613

How to add separate images to the stepper bar on flutter?

I built a stepper bar using another stepperbar dependency(" another_stepper: ^1.0.4"). It's working nicely. like this...

enter image description here

But I want to add separate images to these steps. When I tried that was not displayed. It displays "unable to load".I can't understand the reason for that. I added image in correctly in the "pubspec.yaml"file

enter image description here

my code

 @override
  State<BarScreen> createState() => _BarScreenState();
}

class _BarScreenState extends State<BarScreen> {
  List<StepperData> stepperData = [
    StepperData(
      title: "Order Placed",
      subtitle: "",
    ),
    StepperData(
      title: "Preparing",
      subtitle: "",
    ),
    StepperData(
      title: "On the way",
      subtitle: "",
    ),
    StepperData(
      title: "Delivered",
      subtitle: "",
    ),
  ];
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(left: 20),
          child: AnotherStepper(
            stepperList: stepperData,
            stepperDirection: Axis.vertical,
            horizontalStepperHeight: 70,
            dotWidget: Container(
                padding: const EdgeInsets.all(8),
                decoration: const BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.all(Radius.circular(30))),
                child: Column(
                  children: <Widget>[
                    Row(children: const <Widget>[
                      Image(
                        image: AssetImage('assests/logo.png'),
                        height: 10,
                        width: 10,
                      ),
                    ]),
                    Row(children: const <Widget>[
                      Image(
                        image: AssetImage('assests/logo.png'),
                        height: 10,
                        width: 1,
                      ),
                    ]),
                  ],
                )),
            activeBarColor: Colors.green,
            inActiveBarColor: Colors.grey,
            activeIndex: 2,
            barThickness: 8,
          ),
        ),
      ),
    );
  }
}


How to add separate images?

Upvotes: 0

Views: 157

Answers (1)

MANISH DAYMA
MANISH DAYMA

Reputation: 1242

Maybe your folder name is incorrect.

change image: AssetImage('assests/logo.png'),

to image: AssetImage('assets/logo.png'),

Upvotes: 1

Related Questions