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.
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.'
},
];
2
Answers
As per your reference image I have design below code add card_swiper dependency in your
pubspec.yaml
fileimport below package in your code file
your List:
Your Widget:
Result Screen->
You could achieve this without any dependency and just by using
PageView
andTabSelector
widgets with few lines of code.The result is something like this.
Test yourself in DartPad.
Happy coding:)