The most elegant way to make show images or a brief list of news or any other elements is to make a carousel that can make you use less space than a normal list. it also makes the user experience smooth and better.
In this tutorial, I will show you how to make a Carousel in Android Studio And flutter.
by the end of this tutorial, you will be able to create this:
alright, so let's begin
Create the project.
first of all, let's create an empty project. When you create a new project in Flutter, it always creates for you an app, what we will do is that we will remove that project and create a new empty project.
this is the base code of our project
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
//let's disable the debug banner
debugShowCheckedModeBanner: false,
home: TravelApp(),
));
class TravelApp extends StatefulWidget {
@override
_TravelAppState createState() => _TravelAppState();
}
class _TravelAppState extends State<TravelApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff9f9f9),
body: SafeArea(
),
);
}
}
Now, before we start creating our app, we need to add the library dependencies. to do that, go to the pubspec.yaml file and inside dependecies add this line
carousel_slider: ^1.3.0
now let's start coding.
first of all, let's import the carousel_slider package in our project
import 'package:carousel_slider/carousel_slider.dart';
now we need to create a list of images URL that we want to display inside our carousel, you can choose the image that you want
inside your State class and before the widget build add these lines
int _current;
List imgList = [
'https://images.unsplash.com/photo-1590083948608-525d75ee5edb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80',
'https://images.unsplash.com/photo-1566763481246-3d765d357293?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1566764577421-ad670748f51c?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1566764579018-da7fde771fb4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1566763306929-a936c7856f7f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
];
now inside your SafeArea widget add this child
body: SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 28.0,horizontal: 12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CarouselSlider(
height: 400.0,
initialPage: 0,
// if you remove this line then all the image will have the same size
//but let's keep it true
enlargeCenterPage: true,
onPageChanged: (index){
setState(() {
_current = index;
});
},
items: imgList.map((imgUrl){
return Builder(
builder: (BuildContext context){
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(18.0),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(12.0),
),
child: Image.network(imgUrl,fit: BoxFit.fill,),
);
},
);
}).toList(),
),
],
),
),
),
and that's it. you can run your app and see the result.
and this is the full code
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
void main() => runApp(MaterialApp(
//let's disable the debug banner
debugShowCheckedModeBanner: false,
home: TravelApp(),
));
class TravelApp extends StatefulWidget {
@override
_TravelAppState createState() => _TravelAppState();
}
class _TravelAppState extends State<TravelApp> {
//Now we need to add the caroussel dependencies
//Now create a list that will contains the images URL
//I picked some images from unsplash, so you can choos your favorite one
//Also create a new integer that will indicate the current carousel
int _current;
List imgList = [
'https://images.unsplash.com/photo-1590083948608-525d75ee5edb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80',
'https://images.unsplash.com/photo-1566763481246-3d765d357293?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1566764577421-ad670748f51c?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1566764579018-da7fde771fb4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
'https://images.unsplash.com/photo-1566763306929-a936c7856f7f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80',
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff9f9f9),
body: SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 28.0,horizontal: 12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CarouselSlider(
height: 400.0,
initialPage: 0,
// if you remove this line then all the image will have the same size
//but let's keep it true
enlargeCenterPage: true,
onPageChanged: (index){
setState(() {
_current = index;
});
},
items: imgList.map((imgUrl){
return Builder(
builder: (BuildContext context){
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(18.0),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(12.0),
),
child: Image.network(imgUrl,fit: BoxFit.fill,),
);
},
);
}).toList(),
),
],
),
),
),
);
}
}
if you want to learn more about this library and use it correctly, I recommend you to visit this link
Carousel_slider library
Make a Carousel slider in Flutter
Reviewed by Medics
on
May 23, 2020
Rating:
Reviewed by Medics
on
May 23, 2020
Rating:
No comments: