Criar um controle deslizante de carrossel no Flutter

A maneira mais elegante de criar imagens de programas ou uma breve lista de notícias ou qualquer outro elemento é criar um carrossel que pode fazer com que você use menos espaço do que uma lista normal. também torna a experiência do usuário suave e melhor.

Neste tutorial, mostrarei como fazer um carrossel no Android Studio e Flutter.

Até o final deste tutorial, você poderá criar isso:

tudo bem, então vamos começar

Crie o projeto.

Antes de tudo, vamos criar um projeto vazio. Quando você cria um novo projeto no Flutter, ele sempre cria um aplicativo para você, o que faremos é remover o projeto e criar um novo projeto vazio.
este é o código base do nosso projeto

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(
      ),

    );
  }
}

Agora, antes de começarmos a criar nosso aplicativo, precisamos adicionar as dependências da biblioteca. para fazer isso, acesse o arquivo pubspec.yaml e, dentro das dependências, adicione esta linha

carousel_slider: ^1.3.0

agora vamos começar a codificar.

Em primeiro lugar, vamos importar o pacote carousel_slider em nosso projeto

import 'package:carousel_slider/carousel_slider.dart';

agora precisamos criar uma lista de URLs de imagens que queremos exibir dentro do nosso carrossel. Você pode escolher a imagem que deseja dentro da sua classe State e antes da criação do widget, adicione essas linhas

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',
];

agora dentro do seu widget SafeArea adicione este filho

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,
               // se você remover esta linha, toda a imagem terá o mesmo tamanho 
               //, mas vamos mantê-la verdadeira
               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(),
             ),
           ],
         ),
       ),
     ),

e é isso. você pode executar seu aplicativo e ver o resultado.
e este é o código completo

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
void main() => runApp(MaterialApp(
  //vamos desativar o banner de depuração
  debugShowCheckedModeBanner: false,
  home: TravelApp(),
));

class TravelApp extends StatefulWidget {
  @override
  _TravelAppState createState() => _TravelAppState();
}

class _TravelAppState extends State<TravelApp> {
  //Agora precisamos adicionar as dependências do carrossel
  //Agora crie uma lista que contenha o URL das imagens
  //Eu escolhi algumas imagens do unsplash, para que você possa escolher a sua favorita
  //Crie também um novo número inteiro que indique o carrossel atual
  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,
                // se você remover esta linha, toda a imagem terá o mesmo tamanho
                //mas vamos manter isso verdadeiro
                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(),
              ),
            ],
          ),
        ),
      ),

    );
  }
}

Se você quiser saber mais sobre esta biblioteca e usá-la corretamente, recomendo que você visite este link Biblioteca Carousel_slider