Más tutoriales de programación

1. Botones en Flutter 2. Menu lateral Drawer en Flutter 3. Diseño de una Interfaz en Flutter 4. Navegación entre interfaces en Flutter 5. Leer o parsear Json con Flutter 6. Degradado en Flutter 7. Eliminar cinta debug en Flutter 8. Primera App con Flutter 9. Animación Wave en Flutter 10. Navegación Drawer interactiva 11. Generar un APK en modo release 12. Instalación de Flutter en Android Studio 13. Bordes redondeados en Flutter 14. Reducir el tamaño de un Apk 15. Centrar un Texto Vertical y Horizontal 16. Cargar imágenes en Flutter JPG, GIF o SVG 17. Animated Align Widget 18. Animación Swipe con cambio de background

Animación Swipe con cambio de background

Card Animado Swipe cambiando el background Diseño UI Flutter

VIDEO Card Animado Swipe cambiando el background Diseño UI Flutter

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 132 veces | Publicado hace 3 semanas