Inicio » Blog »

31 diciembre, 2020

Animación Swipe con cambio de background

Diseño de una interfaz animada en Flutter usando Provider para cambiar el estado de un widget desde otro, Ejemplo con card de paises Perú, Bolivia, México.

Animación Swipe con cambio de background

Suscríbete a nuestro canal en Youtube

Suscríbirse

Diseño de una interfaz animada en Flutter usando Provider para cambiar el estado de un widget desde otro, Ejemplo con card de paises Perú, Bolivia, México.

Por ahora veamos parte del código fuente:

 

main.dart


import 'package:flutter/material.dart';
import 'package:swipe/inicio.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

 

inicio.dart

import 'background.dart';
import 'colorProvider.dart';
import 'paginas.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return ChangeNotifierProvider(
      create: (_) => ColorProvider(),
      child: Scaffold(
        body: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Bg(),
            Positioned(
              top: 40,
                child: Container(
              width: MediaQuery.of(context).size.width,
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Icon(
                    Icons.menu,
                    color: Colors.white,
                    size: 32,
                  ),
                  Text(
                    'COPA AMÉRICA', style: TextStyle(color: Colors.white, fontSize: 20)
                  ),
                  Icon(Icons.search, color: Colors.white, size: 32),
                ],
              ),
            )),
            const Positioned(
              top: 100,
              child: Text("2023",style: TextStyle(color: Colors.white, fontSize: 50),),
            ),
            Positioned(
                bottom: 60,
                child: Paginas()),
          ],
        ),
      ),
    );
  }
}

 

background.dart

import 'colorProvider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Bg extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<ColorProvider>(builder: (context, colorProvider, __) {
      return AnimatedContainer(
        duration: Duration(milliseconds: 200),
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: colorProvider.colorSelect,
                begin: Alignment.bottomLeft,
                end: Alignment.topRight)),
      );
    });
  }
}

 

card.dart

import 'item.dart';
import 'package:flutter/material.dart';

class CardVista extends StatelessWidget {

  final Category category;

  const CardVista({Key? key, required this.category}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      margin: const EdgeInsets.only(
        right: 32
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.white,
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(
              height: 24,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    height: 40,
                    width: 40,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      border: Border.all(
                        color: Colors.black12,
                      ),
                    ),
                    child: Icon(category.icon),
                  ),
                  Container(
                    height: 40,
                    width: 40,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      border: Border.all(
                        color: Colors.black12,
                      ),
                    ),
                    child: Icon(Icons.more_vert),
                  ),
                ],
              ),
            ),
            Spacer(),
            Text(
              '${category.totalTasks} REGIONES',
            ),
            Text(
              category.title, style: const TextStyle(fontSize: 40),
            ),
            const SizedBox(
              height: 32,
            ),
            const SizedBox(
              height: 16,
            )
          ],
        ),
      ),
    );
  }
}

 

colorProvider.dart

import 'package:flutter/material.dart';

const LISTA_COLORES = [
  [Color(0xFFEC407A),Color(0xFFE91E63)],
  [Color(0xFFFFEE58),Color(0xFFFFEB3B)],
  [Color(0xFF29B6F6),Color(0xFF03A9F4)],
  [Color(0xFF66BB6A),Color(0xFF4CAF50)],
  [Color(0xFF66BB6A),Color(0xFF4CAF50)],
  [Color(0xFFEC407A),Color(0xFFE91E63)],
  [Color(0xFFFFEE58),Color(0xFFFFEB3B)],
  [Color(0xFF29B6F6),Color(0xFF03A9F4)],
  [Color(0xFF66BB6A),Color(0xFF4CAF50)],
  [Color(0xFF66BB6A),Color(0xFF4CAF50)]
];

class ColorProvider extends ChangeNotifier{
  List<Color> colorSelect=LISTA_COLORES.first;
  changeColors(int index){
    colorSelect = LISTA_COLORES[index];
    notifyListeners();
  }
}

 

item.dart

import 'package:flutter/material.dart';

class Category {
  IconData icon;
  String title;
  int totalTasks;

  Category({
    required this.icon,
    required this.title,
    required this.totalTasks,
  });
}

List<Category> categoryList = [
  Category(
    icon: Icons.person,
    totalTasks: 1,
    title: 'PERÚ',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 2,
    title: 'CHILE',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 3,
    title: 'ARGENTINA',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 4,
    title: 'BOLIVIA',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 5,
    title: 'PARAGUAY',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 6,
    title: 'BRASIL',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 7,
    title: 'COLOMBIA',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 8,
    title: 'ECUADOR',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 9,
    title: 'VENEZUELA',
  ),
  Category(
    icon: Icons.person,
    totalTasks: 10,
    title: 'URUGUAY',
  ),
];

paginas.dart

import 'card.dart';
import 'item.dart';
import 'colorProvider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Paginas extends StatefulWidget {
  @override
  _PaginasState createState() => _PaginasState();
}

class _PaginasState extends State<Paginas> {
  int _currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.50,
      width: MediaQuery.of(context).size.width,
      child: PageView.builder(
        controller: PageController(viewportFraction: 0.8),
        itemCount: categoryList.length,
        itemBuilder: (context, index){
          return AnimatedPadding(
            padding: _currentPage == index ? EdgeInsets.all(0) : EdgeInsets.symmetric( vertical: 40),
            duration: Duration(milliseconds: 200),
            child: AnimatedOpacity(
              opacity: _currentPage == index ? 1 : 0.5,
              duration: Duration(milliseconds: 200),
              child: CardVista(
                category: categoryList[index],
              ),
            ),
          );
        },
        onPageChanged: (newPage){
          setState((){
            _currentPage = newPage;
          });
          Provider.of<ColorProvider>(context,listen: false).changeColors(newPage);
        },
      ),
    );
  }
}

El código completo de los archivos Dart, pueden obtenerlos en el enlace de descarga.


Leido 4829 veces | 3 usuarios

Descarga del código fuente Flutter de Animación Swipe con cambio de background

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.

Opciones de descarga

  • Usuarios Registrados: Inicia sesión para descarga inmediata.
  • Nuevos Usuarios: Regístrate y descarga.

20 descargas

Para descargar el código inicia sesión o crea una cuenta

Iniciar Sesión

Compartir link del tutorial con tus amigos


Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú