Show me the code how to add these images in carousal in flutterenter image description here

CodePudding user response：

Use this carousel_slider 4.0.0 package from pubdev.

Installation

Add carousel_slider: ^4.0.0 to your pubspec.yaml dependencies. And import it:

import 'package:carousel_slider/carousel_slider.dart';

How to use Simply create a CarouselSlider widget, and pass the required params:

CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1,2,3,4,5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.amber
          ),
          child: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)

CodePudding user response：

https://pub.dev/packages/smooth_page_indicator you can use this for dot animation along with https://pub.dev/packages/carousel_slider here is a little example please adjust size accordingly

class Carosel extends StatelessWidget {
  List<listScreen> introduction = [
    listScreen(image: 'assets/Reading_Plans.png'),
    listScreen(image: 'assets/Reading_Plans.png'),
    listScreen(image: 'assets/Reading_Plans.png'),
    listScreen(image: 'assets/Reading_Plans.png'),
  ];
  set index(value) => _index.value = value;
  get index => _index.value;
  final _index = 0.obs;
  final CarouselController _controller = CarouselController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: MediaQuery.of(context).size.width / 1.5,
          child: Column(
            children: [
              Container(
                height: MediaQuery.of(context).size.height / 2,
                child: CarouselSlider(
                  carouselController: _controller,
                  options: CarouselOptions(
                      enableInfiniteScroll: false,
                      viewportFraction: 1,
                      height: MediaQuery.of(context).size.height / 3,
                      aspectRatio: 1.0,
                      onPageChanged: (ind, reason) {
                        index = ind;
                      }),
                  items: introduction
                      .map((listScreen item) => Column(
                            children: [
                              SizedBox(
                                height: kToolbarHeight / 2,
                              ),
                              Container(
                                child: Image(
                                  image: AssetImage(item.image),
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              // Spacer(),
                            ],
                          ))
                      .toList(),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 35.0,
                  vertical: 15,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Obx(() {
                      return index != 3
                          ? Container(
                              width: 90,
                              child: AnimatedSmoothIndicator(
                                activeIndex: index,
                                count: 4,
                                effect: ExpandingDotsEffect(
                                  dotHeight: 13,
                                  dotWidth: 13,
                                  activeDotColor: Color(0xff5C5C78),
                                ),
                              ),

                          : Container();
                    }),
                  ],
                ),
              ),
              Spacer(),
            ],
          ),
        ),
      ),
    );
  }
}