Is it able to animate Animated container using stateless widget with provider

Question

Supposed that the final input of the screen is as the below one:

It works fine with the stateful widget and using the set state, as you will figure the problem in the buildDot method is it doesn't update after change the screen by using Stateless widget..

here's the below code:

import 'package:flutter/material.dart';
import 'package:ipetv1/constants.dart';
import 'package:ipetv1/model/intro_screen_data.dart';
import 'package:ipetv1/screens/components/intro_content.dart';
import 'package:ipetv1/size_config.dart';
import 'package:ipetv1/widgets/default_button.dart';
import 'package:provider/provider.dart';

class BodyIntroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset('assets/images/ipet_image_logo.jpg'),
            ),
            Expanded(
              flex: 3,
              child: Consumer<IntroScreenData>(
                builder: (context, introScreenData, child) {
                  return PageView.builder(
                    onPageChanged: (value) {
                      introScreenData.changeDotSize(value);
                    },
                    itemCount: introScreenData.introCount,
                    itemBuilder: (context, index) => IntroContent(
                      image: introScreenData.introData[index]["image"],
                      text: introScreenData.introData[index]['text'],
                    ),
                  );
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(
                Provider.of<IntroScreenData>(context).introCount,
                (index) => buildDot(context, index: index),
              ),
            ),
            Expanded(
              flex: 2,
              child: Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: getProportionateScreenWidth(20)),
                child: Column(
                  children: <Widget>[
                    // Spacer(),
                    Spacer(flex: 2),
                    DefaultButton(
                      text: "Continue",
                      press: () {
                        // Navigator.pushNamed(context, SignInScreen.routeName);
                      },
                    ),
                    Spacer(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  AnimatedContainer buildDot(BuildContext context, {int index}) {
    return AnimatedContainer(
      duration: kThemeAnimationDuration,
      margin: EdgeInsets.only(right: 25),
      height: 6,
      width:
          Provider.of<IntroScreenData>(context).currentPage == index ? 50 : 10,
      decoration: BoxDecoration(
        color: Provider.of<IntroScreenData>(context).currentPage == index
            ? AppConst.kPrimaryColor
            : Color(0xFFD8D8D8),
        borderRadius: BorderRadius.circular(3),
      ),
    );
  }
}

intro_screen_data.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class IntroScreenData extends ChangeNotifier {
  int currentPage = 0;
  List<Map<String, String>> introData = [
    {
      "text": "Welcome to I-Pet,\nLet’s shop!",
      "image": "assets/images/ipet_welcome.png"
    },
    {
      "text": "We help people conect with store \naround All Over the World",
      "image": "assets/images/pet_shop.png"
    },
    {
      "text": "We show the easy way \nto shop.",
      "image": "assets/images/pet_eating.png"
    },
    {
      "text": "We can let you know about pet places \nin easy way.",
      "image": "assets/images/pet_places.png"
    },
    {
      "text": "We can let you take care about you pet \nfrom your place.",
      "image": "assets/images/pet_care.png"
    },
  ];

  int get introCount {
    return introData.length;
  }

  int changeDotSize(int value) {
    notifyListeners();
    return currentPage = value;   
  }
}

Answer 1

You have to notify your listeners by using the notifyListeners() function or else it won't update. It is like calling setState, but affects all the widgets that are using the provided class data.

so introScreenData.currentPage = value should be in a method (in your IntroScreenData class) where you also call notifyListeners().