How To Create Carousel Slider Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 29-10-2020

When it comes to providing better user experience to users on mobile apps, making effective use of space is a must. Carousels come into play here by allowing the developers to show multiple items in a single, coveted space. Thankfully, implementing carousels in flutter is pretty straightforward and all we need is the carousel_slider package. By the end of this tutorial, you will be able to create a similar carousel in flutter.

How To Create Carousel Slider Using Flutter Android App

 Carousel Slider 

Step 1:  We cannot directly remove the time stamp from Numeric Form Field but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code

dependencies:
  flutter:
    sdk: flutter
  carousel_pro: ^1.0.0
 

Step 2: After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. 

flutter pub get

Step 3: Open your project’s main.dart file and import material.dart and    carousel_pro: ^1.0.0. dart package.
import 'package:carousel_pro/carousel_pro.dart';

Complete Code For  Carousel Slider In Flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: CarouselPage(),
    );
  }
}

class CarouselPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('Carousel Slider'),
        actions: [
          IconButton(icon: Icon(Icons.shopping_cart_outlined), onPressed: (){})
        ],
      ),
      body: Column(
        children: [
          Center(
            child: SizedBox(
              height: 150.0,
              child: Carousel(
                boxFit: BoxFit.cover,
                autoplay: false,
                animationCurve: Curves.fastOutSlowIn,
                animationDuration: Duration(milliseconds: 1000),
                dotSize: 6.0,
                dotIncreasedColor: Color(0xFFFF335C),
                dotBgColor: Colors.transparent,
                dotPosition: DotPosition.topRight,
                dotVerticalPadding: 10.0,
                showIndicator: true,
                indicatorBgPadding: 7.0,
                images: [
                  NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRacPoDa7CDXg8pdJlW_ogN_W4fEuuexCoy1Q&usqp=CAU'),
                  NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ_7txpJZL4GzKO8sTzAxpC8IaGorXNkiszGw&usqp=CAU'),
                  NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRsf7BkUIHOZfUXxtwPwZeU_uENUmDSuzsnBA&usqp=CAUg"),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Related Post