Carousel in Flutter Without Any library

Carousel Slider is very Popular in App as well as in Web , Create Carousel in Flutter is very easy Flutter provides Wide Ranges of inbuilt Widgets For different different utility.in Carousel Slider you can display Image Text or any thing you want and it easy to implement from Scratch.

Step 1: First create one pagecontroller and initialize that into initState method and also dispose into dispose method . Below is example

  late final PageController pageController;

  @override
  void initState() {
    pageController = PageController(
        initialPage:0,
        viewportFraction: 0.85);
    pageChangeTimer = moveTimer();
    super.initState();
  }

  void dispose() {
    pageController.dispose();
  }

As shown in above code you can give value of initialPage and viewportFraction.initialPage is index of page which you want to show in starting itself and viewportFraction is basically how much you want to show the left & right items in the main UI.

Step 2: Add PageView builder as widget, Below is example

PageView.builder(
    controller: pageController,
    itemBuilder: (_, index) {
      return AnimatedBuilder(
        animation: pageController,
        builder: (context, child) {
          return child!;
        },
        child: Container(
          margin:
              EdgeInsets.only(left: 5, right: 5, top: 12, bottom: 12),
          width: 250,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(15)),
              color: Colors.blueGrey),
          child: Container(color: Colors.blue,child: Text(index.toString(),style: TextStyle(fontSize: 30),),),
        ),
      );
    },
    itemCount: 7,
  )

in above code in PageView Builder’s Controller and AnimatedBuilder’s animation you need to give PageController variable which we craeted in First Step.In PageView Builder you have itemCount key in which you need to provide no of items which carousel have. In AnimatedBuilder’s child you can give Widget Which you want to show. now it should work like below image.

🥳🥳 we have implemented, this is the only thing we need to write in Flutter To implement Carousel . Share if it is helpful And Don’t Forgot like 👍.