how to display dot text carousel in flutter

UmerYaseen
November 25, 2022
76 views
1 vote
2 Answers

I want to show a text carousel with dots below the text on the onboarding screen of my app. How can I achieve this? Watch the image to see what I wanna achieve.

Answers

As per your reference image I have design below code add card_swiper dependency in your pubspec.yaml file

import below package in your code file

import 'package:card_swiper/card_swiper.dart';

your List:

 List cardsData = [
    {
      'title': 'Your Title Here',
      'subTitle':
          'Labore dolor invidunt et et diam aliquyam eos diam accusam sanctus. Ipsum amet sea sadipscing sanctus magna elitr erat duo.'
    },
    {
      'title': 'Your Title Here',
      'subTitle':
          'Labore dolor invidunt et et diam aliquyam eos diam accusam sanctus. Ipsum amet sea sadipscing sanctus magna elitr erat duo.'
    },
    {
      'title': 'Your Title Here',
      'subTitle':
          'Labore dolor invidunt et et diam aliquyam eos diam accusam sanctus. Ipsum amet sea sadipscing sanctus magna elitr erat duo.'
    },
    {
      'title': 'Your Title Here',
      'subTitle':
          'Labore dolor invidunt et et diam aliquyam eos diam accusam sanctus. Ipsum amet sea sadipscing sanctus magna elitr erat duo.'
    },
    {
      'title': 'Your Title Here',
      'subTitle':
          'Labore dolor invidunt et et diam aliquyam eos diam accusam sanctus. Ipsum amet sea sadipscing sanctus magna elitr erat duo.'
    },
  ];

Your Widget:

 SizedBox(
          height: 150.0,
          child: Card(
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      Text(
                        cardsData[index]['title'] + 't' + index.toString(),
                        style: const TextStyle(
                          fontSize: 25,
                        ),
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      Text(
                        cardsData[index]['subTitle'],
                        style: const TextStyle(
                          fontSize: 15,
                          color: Colors.grey,
                        ),
                      ),
                    ],
                  ),
                );
              },
              autoplay: true,
              itemCount: cardsData.length,
              pagination: SwiperPagination(
                alignment: Alignment.bottomCenter,
                builder: DotSwiperPaginationBuilder(
                  color: Colors.grey,
                  activeColor: Colors.grey.shade700,
                ),
              ),
            ),
          ),
        ),

Result Screen->

You could achieve this without any dependency and just by using PageView and TabSelector widgets with few lines of code.

The result is something like this.

Test yourself in DartPad.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TextCarousal(),
    );
  }
}

class TextCarousal extends StatefulWidget {
  const TextCarousal({Key? key}) : super(key: key);

  @override
  State<TextCarousal> createState() => _TextCarousalState();
}

class _TextCarousalState extends State<TextCarousal>
    with SingleTickerProviderStateMixin<TextCarousal> {
  final PageController pageController = PageController();
  late TabController tabController;

  static const textList = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
  ];

  @override
  void initState() {
    tabController = TabController(length: textList.length, vsync: this);
    pageController.addListener(_updateTabController);
    super.initState();
  }

  @override
  void dispose() {
    pageController.removeListener(_updateTabController);
    super.dispose();
  }

  void _updateTabController() {
    tabController.index = pageController.page!.toInt();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Container(
          height: 220,
          color: Colors.white,
          child: Column(
            children: [
              SizedBox(
                height: 160,
                width: 250,
                child: PageView.builder(
                    controller: pageController,
                    itemCount: textList.length,
                    itemBuilder: (context, index) => Center(
                          child: Text(
                            textList[index],
                            textAlign: TextAlign.center,
                            style: Theme.of(context)
                                .textTheme
                                .bodyMedium!
                                .copyWith(color: Colors.black),
                          ),
                        )),
              ),
              TabPageSelector(
                controller: tabController,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Happy coding:)

Please signup or login to give your own answer.

Click here to cancel reply.