Animación Swipe con cambio de background

Card Animado Swipe cambiando el background Diseño UI Flutter

Video Animación Swipe con Provider

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.

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.

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 12

Redactado por: , Leido 1963 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021