Question 79942 in Flutter Question posted in
The official Flutter documentation can be found here.

how to display dot text carousel in flutter

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.
Reference Image

Tags:

2

Answers


  1. 0

    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-> image

    Login or Signup to reply.
  2. 0

    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.

    enter image description here

    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:)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search