Flutter – Indicador de página suave

Smooth Page Indicator es un indicador de página animado personalizable con el siguiente conjunto de efectos incorporados.

• Gusano
• Puntos de expansión
• Puntos de desplazamiento
• Saltar puntos
• Deslizar
• Escala
• Intercambio

Primeros pasos

Primero, debemos agregar la dependencia en el archivo pubspec.yaml .

dependencies:
 smooth_page_indicator: ^1.0.0+2

No te olvides de conseguir paquetes.

Nota : La versión de los paquetes puede cambiar en el momento de leer.

importarlo

Cuando lo usamos necesitamos Importar el paquete.

import 'package:smooth_page_indicator/smooth_page_indicator.dart';

Entrando en el código

Ahora, en la función void main( ) , llame al método runApp( ) y llame a la clase MysmoothIndicator ( ). Definición del controlador variable del tipo Controlador utilizado para controlar la página activa (saber qué página se selecciona después de cada deslizamiento)

var controller;
controller =PageController(
  viewPortFraction: 0.8,
 );

La viewportFraction determina que cada niño complete el eje principal, Aquí 80%. Ahora nuestra Clase se parece a Hasta ahora,

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
  
void main() {
  runApp(MysmoothIndicator());
}  // main function
  
class MysmoothIndicator extends StatefulWidget {
  @override
  _MysmoothIndicatorState createState() => new _MysmoothIndicatorState();
}
  
class _MysmoothIndicatorState extends State<MysmoothIndicator> {
  // variable controller
  var controller;  
 @override
  void initState() {
      controller=new PageController(
      viewportFraction:0.8,
    );
    super.initState();
}

Ahora haga una lista de páginas para deslizar. para que a cada golpe mostremos los efectos.

@override
 Widget build(BuildContext context) {
   // materialApp
   return new MaterialApp(  
     title: 'SPI Worm',
     // scaffold
     home: new Scaffold(  
       appBar:AppBar(
           title: new Text('SPI Worm')
       ),
       body:
       Container(
         width:double.infinity,
         height:400,
         child:
         Column(
           children: <Widget>[
             SizedBox(
               height:300,
               // pageview
               child:new PageView(  
                 controller:controller,
                 children: <Widget>[
                   SizedBox(
                   width:double.infinity,
                   height:300,
                   child:
                    Card(
                     color:Colors.yellow,
                     child:
                     Center(
                      child:
                       Text('Simple Text,Keep Swiping'),
                     ),
                   ),
                  ),
  
                   SizedBox(
                     width:double.infinity,
                     height:300,
                     child:
                     Card(
                       color:Colors.white70,
                       child:
                       Center(
                         child:
                          Icon(Icons.favorite),
                       ),
                     ),
                   ),
  
                   SizedBox(
                     width:double.infinity,
                     height:300,
                     child:
                     Card(
                       color:Colors.black26,
                       child:
                       Center(
                         child:
                          Column(
                            mainAxisAlignment:MainAxisAlignment.center,
                            crossAxisAlignment:CrossAxisAlignment.center,
                            children: <Widget>[
                              Image.asset("Images/Dart_Logo.png"),
                              Text("Dart Logo!")
                            ],
                          )
                       ),
                     ),
                   ),
                 ],
               ),
             ),
           ],
         )
       ),
     ),
   );
 }
}

Salida hasta ahora: 

Ahora tenemos que crear un indicador para diferentes efectos,

Efectos de gusano 

En el widget pageView, use el widget Flexible y use smoothPageIndicator como un elemento secundario, y tome wormEffect() como una propiedad secundaria del efecto .

Flexible(
         child:
           SmoothPageIndicator(
                controller:controller,
                count:3,
                effect:WormEffect(),
        ),
)

Producción:

Efectos de puntos de salto

En efecto , la propiedad de SmoothPageIndicator da JumpingDotEffect().

Container(
          child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:JumpingDotEffect(),                  
         ),
)

Producción:

ScrollPuntosEfectos

En efecto , la propiedad de SmoothPageIndicator da ScrollDotEffect() .

Container(
          child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:ScrollDotEffect(  activeStrokeWidth : 2.6,
                  activeDotScale : 0.4,
                  radius : 8,
                  spacing : 10,),                
         ),
)

Producción:

Efecto de escala

En efecto , la propiedad de SmoothPageIndicator da ScaleEffect() .

Container(
          child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:ScaleEffect(),                  
        ),
)

Producción:

Efecto deslizante 

En efecto , la propiedad de SmoothPageIndicator da SlideEffect().

Container(
         child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:SlideEffect(
                  spacing : 8,
                  radius : 4,
                  dotWidth : 24,
                  dotHeight : 16,
                  activeColor : Colors.indigo,
            ),
     ),
)

Producción: