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.

Video Animación Swipe con Provider
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

Card Animado Swipe cambiando el background Diseño UI Flutter

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:


import 'package:animacion/MyHomePage.dart';
import 'package:flutter/material.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',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

Segunda parte

import 'package:animacion/Bg.dart';
import 'package:animacion/ColorProvider.dart';
import 'package:animacion/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: EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(
                    Icons.menu,
                    color: Colors.white,
                    size: 32,
                  ),
                  Text(
                    'AMÉRICA',
                    style: Theme.of(context).textTheme.headline6.copyWith(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Icon(Icons.search, color: Colors.white, size: 32),
                ],
              ),
            )),
            Positioned(
              top: 100,
              child: Text("2021",style: TextStyle(color: Colors.white, fontSize: 50),),
            ),
            Positioned(
                bottom: 60,
                child: Paginas()),
          ],
        ),
      ),
    );
  }
}

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

¿Quieres descargar el código fuente Animación Swipe con cambio de background?
...por favor suscríbete gratuitamente para descargarlo

Flutter

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 374 veces | Publicado hace 3 meses

Curso Flutter y Laravel Tienda Delivery

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021