Card Animado Swipe cambiando el background Diseño UI Flutter
VIDEO 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.
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
Visitado 132 veces | Publicado hace 3 semanas
© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021