Contenido del curso
Tercer reto
Alexis Anderson Montenegro Reyes
Estudiante
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
Estudiante
Daniel Jussef Zamorano Silva
Estudiante
Usuario anónimo
User
Oscar Torres
Estudiante
Anthony Will Solsol Soplin
Estudiante
Antonio Gonzales Moquillaza
EstudianteOscar Torres
Estudiante
Ann Code
ProfesorJUAN SEBASTIAN RODRIGUEZ JIMENEZ
Estudiante
Jhonatan Alexis Arenas Bonilla
Estudiante
Carlos Daniel
Estudiante
Victor Hugo Vázquez Gómez
Estudiante
Diana Carolina Quintero Caro
Estudiante
Marco Luna
Estudiante
Jorge Aldair Cortés López
Estudiante
Angel Mambel
Estudiante
Kevin Meléndez Hernández
Estudiante
William Mamani Cutipa
Estudiante
Cristhian Alejandro Morales Herrera
Estudiante
Emmanuel Guerra Sánchez
Estudiante
Rodrigo Guerra Castilla
Estudiante
JAIME URQUIZU
Estudiante
Sebastián Barre
EstudianteSebastián Barre
Estudiante
Juan Camilo Bula
Estudiante
Waldir Leonardo Jesus Lopez Peve
Estudiante
René Sanchez
Estudiante
Manuel Pineda Vega
Estudiante
Alejandro Cadena Florián
EstudianteManuel Pineda Vega
Estudiante
Paul Mauricio Realpe Guerrero
Estudiante
Guillermo Esteban Torres Renner
Estudiante
Pablo Rafael Cruz López
Estudiante
Jaime Eduardo Falla Cardozo
EstudianteReto:
Github
Me gusto mucho como quedo !!
Wow esta super!
!! Reto cumplido !!
GitHub:
Me gustó como lo desarrollaste, un código muy fluido.
Me gustó, te quedó muy bien.
El reto
Fabuloso!
Muy bien!
Me gusto mucho como quedo !!
Intente hacer algo diferente, aun que el codigo quedo algo desordenado.
https://github.com/AoTanuki/bestiaryApp
Por fin pude terminar 😄
Código
Leer ese código fue un deleite :u
Tardé porque no comprendía lo del CustomClipper, pero hice esto:
Y el código lo realicé así.
CustomAppBar:
class CustomAppBar extends StatelessWidget { @override Widget build(BuildContext context) { final iconAppBar = Container( height: 90, padding: EdgeInsets.only( top: 43, left: 20.0 ), child: InkWell( child: Column( verticalDirection: VerticalDirection.down, children: <Widget>[ Icon( Icons.menu, color: Colors.white ) ], ), ) );// iconAppBar Container final titleBar = Container( margin: EdgeInsets.only( top: 40.0 ), alignment: Alignment.center, child: Text( "Video Games", style: TextStyle( color: Colors.white, fontSize: 26.0, fontWeight: FontWeight.bold, ), ), );// titleBar Container var imageBar = Container( height: 150, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: AssetImage("assets/img/joystick.jpg") ) ), ); return Stack( children: <Widget>[ imageBar, iconAppBar, titleBar, ], ); } } class MyClipper extends CustomClipper<Path>{ @override Path getClip(Size size) { Path path = Path(); path.lineTo(0.0, size.height - 40.0); var firstControlPoint = new Offset(size.width / 6, size.height - 50); var firstEndPoint = new Offset(size.width / 3, size.height - 30.0); path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy); var secondControlPoint = new Offset( size.width * 0.51, size.height); var secondEndPoint = new Offset(size.width * (4 / 6), size.height - 30); path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy); var thirdControlPoint = new Offset(size.width * (5 / 6), size.height - 60); var thirdEndPoint = new Offset(size.width, size.height - 40.0); path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy); path.lineTo(size.width, size.height - 40.0); path.lineTo(size.width, 0.0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) { return false; } }
videogame_card:
class VideoGamesCard extends StatelessWidget { String name = "Uncharted"; String pathImage = "assets/img/uncharted.jpg"; String platform = "PS3/PS4"; VideoGamesCard(this.name, this.platform, this.pathImage); @override Widget build(BuildContext context) { final gamePhoto = Container( margin: EdgeInsets.only( right: 20.0 ), height: 40.0, width: 40.0, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.blue, image: DecorationImage( fit: BoxFit.cover, image: AssetImage("assets/img/control.png") ) ), ); // gamePhoto Container final platformName = Container( child: Text( "Plataforma: $platform", style: TextStyle( color: Colors.cyan, fontSize: 14.0, fontWeight: FontWeight.normal, ) ), );// platformName final videoGameName = Container( child: Text( name, style: TextStyle( color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.w900 ) ), ); // videoGameName Container final videoGamePhoto = Container( margin: EdgeInsets.only( top: 10.0, left: 15.0, right: 10.0 ), height: 80.0, width: 80.0, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( fit: BoxFit.cover, image: AssetImage(pathImage) ) ), ); // videoGamePhoto Container final dataGame = Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ videoGameName, platformName ], ); //dataName Column return Row( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ videoGamePhoto, Expanded( child: dataGame ), gamePhoto ], ); } }
videogame_card_list:
import 'package:flutter/material.dart'; import 'videogames_card.dart'; class VideoGamesCardList extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: <Widget>[ VideoGamesCard("Uncharted: Drake's Treasure", "PS3/PS4", "assets/img/uncharted_drakes_fortune.jpg"), VideoGamesCard("Gears of War 4", "Xbox One/PC", "assets/img/gow4.jpg"), VideoGamesCard("Super Mario Oddysey", "Nintendo Switch", "assets/img/odyssey.jpg"), VideoGamesCard("God of War", "PS4", "assets/img/boy.jpg"), VideoGamesCard("Cuphead", "Xbox One/PC/\nNintendo Switch/macOS/Tesla", "assets/img/cuphead.jpg"), ], ); } }
Y en main:
import 'package:flutter/material.dart'; import 'custom_appbar.dart'; import 'videogames_card_list.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', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: Scaffold ( body: Column( children: <Widget>[ ClipPath( clipper: MyClipper(), child: CustomAppBar() ), VideoGamesCardList() ], ) ) ); } }
Oye amigo esta genial. como haces que la barra tenga ese efecto de curvatura?
Muy bonito header
Aqui esta el resultado del reto, la curva la hice a código con el widget ClipPath. Les dejo el código (la clase se llama GradientBack porque al principio creí que con una degradación podía hacer la curva, pero así no era, y luego no lo cambie XD ):
import 'package:flutter/material.dart'; class GradientBack extends StatelessWidget{ @override Widget build(BuildContext context) { final title = Container( margin: EdgeInsets.only( top: 40.0, left: 100.0, ), child: Text( "DESIGNERS", style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white, ), ), ); final menuIco = Container( margin: EdgeInsets.only( top: 40.0, left: 20.0, ), child: Icon( Icons.menu, color: Colors.white, ), ); final gradient = Container( height: 120.0, alignment: Alignment(-0.9, -0.6), decoration: BoxDecoration( color: Colors.blueAccent, image: DecorationImage( image: AssetImage("assets/img/office.png"), fit: BoxFit.cover, colorFilter: ColorFilter.mode(Colors.blueAccent.withOpacity(0.3), BlendMode.dstATop), ) ), child: Row( children: <Widget>[ menuIco, title, ], ), ); //return gradient; return ClipPath( child: gradient, clipper: AppBarWaveClipper(), ); } } class AppBarWaveClipper extends CustomClipper<Path>{ @override Path getClip(Size size) { var path = Path(); var oneFraction = size.width/6; var firstControlPoint = new Offset(oneFraction, size.height - 35); var firstEndPoint = new Offset(oneFraction * 2, size.height - 20); var secondControlPoint = new Offset(oneFraction * 3, size.height); var secondEndPoint = new Offset(oneFraction * 4, size.height - 20); var thirdControlPoint = new Offset(oneFraction * 5, size.height - 35); var thirdEndPoint = new Offset(oneFraction * 6, size.height - 30); path.lineTo(0.0, size.height - 30); path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy); path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy); path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, thirdEndPoint.dy); path.lineTo(size.width, 0.0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) { // TODO: implement shouldReclip return false; }
Así quedo el mío, aunque me aleje un poco del diseño original:
Si lo quieren probar, aquí les dejo el código.
Muy buen aporte. Esto sí es saber especificar cómo hacer algo...
Reto finalizado, basado en https://dribbble.com/shots/6184058-e-commerce-app-exploration
Puedes dejar el codigo en git plis
Reto: mi lista simula la vista del historial de una app que seria una pokedex y mostraria todos los pokemones que se escanearon: :3
las imagenes que prepare en el diseño eran para una pantalla mas pequeña y por eso me quedo de esa manera lol.
asi la prepare con el curso que lleve de Figma aqui en platzi :3:
Esto es lo que hice para el reto!, pero no pude eso si darle la misma forma pero pude dejarlo así 😃
Ocupé de plantilla la imagen que pusieron en el ejercicio, les comparto mi resultado.
¿Cómo lograste hacer la curva de la AppBar? ¡Muy buen trabajo por cierto!
Lo hice con un clipper wave, te comparto el código del headbar.
class HeaderAppBar extends StatelessWidget { @override Widget build(BuildContext context) { var stackHeaderAppBar = Stack( children: [ Container( child: ClipPath( clipper: WaveClipper(), child: Container( height: 140, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: AssetImage("your_image_uri"), colorFilter: ColorFilter.mode( Color.fromRGBO(70, 135, 190, 0.95), BlendMode.srcATop ) ) ), child: Text("your_text_here", style: TextStyle( fontSize: 20, color: Colors.white, fontWeight: FontWeight.bold ),), ), ) ) ], ); return stackHeaderAppBar; } } class WaveClipper extends CustomClipper<Path> { @override Path getClip(Size size) { var path = new Path(); path.lineTo(0.0, size.height - 38); var firstStart = Offset(size.width / 6, size.height - 40); var firstEnd = Offset(size.width / 2 - size.width / 6, size.height - 20); path.quadraticBezierTo( firstStart.dx, firstStart.dy, firstEnd.dx, firstEnd.dy); var secondStart = Offset(size.width / 2, size.height - 5); var secondEnd = Offset(size.width / 2 + size.width / 6, size.height - 20); path.quadraticBezierTo( secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy); var thirdStart = Offset(size.width - (size.width / 6), size.height - 40); var thirdEnd = Offset(size.width, size.height - 38); path.quadraticBezierTo( thirdStart.dx, thirdStart.dy, thirdEnd.dx, thirdEnd.dy); path.lineTo(size.width, 0.0); path.close(); return path; } @override bool shouldReclip(covariant CustomClipper<Path> oldClipper) { return false; } }
class WaveHeader extends StatelessWidget { String title = "Developers"; Wave3Header(this.title); @override Widget build(BuildContext context) { return Stack( children: [ Container( height: double.infinity, width: double.infinity, child: CustomPaint( painter: _WaveHeaderPainter(), ), ), Container( alignment: Alignment(-0.825, -0.825), child: Text( title, style: TextStyle( color: Colors.white, fontSize: 30.0, fontFamily: "Lato", fontWeight: FontWeight.bold), ), ), ], ); } } class _WaveHeaderPainter extends CustomPainter { final quarter = 1 / 4; final eighth = 1 / 8; @override void paint(Canvas canvas, Size size) { final colors = LinearGradient( colors: [ Color(0xFF512DA8), Color(0xFF303F9F), Color(0xFF3F51B5), Color(0xFF00BCD4), ], begin: FractionalOffset(0.3, 0.0), end: FractionalOffset(0.6, 0.25), ); var rect = Offset.zero & size; final paint = Paint() ..style = PaintingStyle.fill ..shader = colors.createShader(rect); //..color = Color.fromRGBO(88, 76, 209, 1.0); //paint.strokeWidth = 10.0; final path = Path(); path.lineTo(0, size.height * 0.2); path.quadraticBezierTo(size.width * (eighth), size.height * 0.15, size.width * quarter, size.height * 0.2); path.quadraticBezierTo(size.width * (eighth * 3), size.height * 0.25, size.width * (quarter * 2), size.height * 0.2); path.quadraticBezierTo(size.width * (eighth * 5), size.height * 0.15, size.width * (quarter * 3), size.height * 0.2); path.quadraticBezierTo(size.width * (eighth * 7), size.height * 0.25, size.width, size.height * 0.2); path.lineTo(size.width, 0); canvas.drawPath(path, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } }
Excelente experiencia, desesperé un poco al principio, pero poco a poco le fui agarrando el gustito
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart'; void main(){ runApp(GuilleApp()); } class GuilleApp extends StatelessWidget{ final String url="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS80VJR4jJXEOrDUBV1_vHMord7JrtwL3xwMOrBffPMvPoduDR3&usqp=CAU"; ////////////////////////////////////////////////////////////// @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Stack( children: [ CardList(), ClipPath( clipper: MyClipper(), child: Container( decoration: BoxDecoration( color: Colors.deepPurple, image: DecorationImage( image: NetworkImage(url), fit: BoxFit.cover, colorFilter: ColorFilter.mode(Colors.deepPurple.withOpacity(0.5),BlendMode.darken) ) ), height: 150, child: Center( child: Text("Acreedores", style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white ),), ), ), ) ], ), ) ); } } class MyClipper extends CustomClipper<Path>{ @override Path getClip(Size size) { Path path=Path(); path.lineTo(0.0, size.height-40.0); var firstControlPoint = new Offset(size.width/6, size.height-60); var firstEndPoint = new Offset(size.width/3, size.height-30.0); path.quadraticBezierTo(firstControlPoint.dx,firstControlPoint.dy, firstEndPoint.dx,firstEndPoint.dy); var secondControlPoint = new Offset( size.width*0.5,size.height); var secondEndPoint = new Offset(size.width*(4/6),size.height-30); path.quadraticBezierTo(secondControlPoint.dx,secondControlPoint.dy, secondEndPoint.dx,secondEndPoint.dy); var thirdControlPoint = new Offset(size.width*(5/6),size.height-60 ); var thirdEndPoint = new Offset(size.width, size.height-40.0); path.quadraticBezierTo(thirdControlPoint.dx,thirdControlPoint.dy, thirdEndPoint.dx,thirdEndPoint.dy); path.lineTo(size.width, size.height-40.0); path.lineTo(size.width, 0.0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) { return false; } } class Card extends StatelessWidget{ String urlPhoto; String mensaje; String nombre; bool leido; Card(this.urlPhoto,this.nombre, this.mensaje, this.leido); @override Widget build(BuildContext context) { return Row( children: [ Container( margin: EdgeInsets.only( top: 20, left: 10 ), width: 60, height: 60, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( fit: BoxFit.cover, image: AssetImage(urlPhoto) ) ), ), Container( width: 220, margin: EdgeInsets.only( top: 10, left: 20, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(nombre, textAlign: TextAlign.left, style: TextStyle( fontSize: 15, fontWeight: FontWeight.bold, color: Colors.black54, ), ), Text(mensaje, textAlign: TextAlign.left, style: TextStyle( fontSize: 12, fontStyle: FontStyle.italic, color: Colors.black38 ),) ], ), ), Container( margin: EdgeInsets.only(left: 10), height: 40.0, width: 40.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), color: Colors.red ), child: Icon( Icons.mail , color: Colors.white, size: 20.0, ) ) ], ); } } class CardList extends StatelessWidget{ @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(top: 100), child: ListView( scrollDirection: Axis.vertical, children: [ Card("assets/image/jhon.jpeg","Jhon Wick","Voy pormi dinero, llevo un lápiz",true), Card("assets/image/vito.jpeg","Don Vito Corleone","Págame, seamos razonables",true), Card("assets/image/busqueda.jpeg","Bryan Mills","te buscaré, te encontraré y te mataré",true), Card("assets/image/chuck.jpeg","Chuck Norris","Déjate de juegos niño",true), Card("assets/image/pablo.jpeg","Pablo Escobar","Mataré a tu madre, tu hermana tu...",true), Card("assets/image/arnold.jpeg","Jhon Matrix","Vietnam parecerá un juego....",true), Card("assets/image/yoda.jpg","Yoda","Pagarme tu debes",true), ], ), ); } }
Resultado
main.dart
import 'package:flutter/material.dart'; import 'package:reto_2/reto.dart'; void main() => runApp( MaterialApp( debugShowCheckedModeBanner: false, home: Reto(), ) );
reto.dart
import 'package:flutter/material.dart'; import 'package:reto_2/contact_card.dart'; import 'package:reto_2/custom_app_bar.dart'; class Reto extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: CustomAppBar( title: Text( "DESIGNERS", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white ), ), navigatorButton: IconButton( icon: Icon( Icons.menu, color: Colors.white ), onPressed: null ), centerTitle: true, ), body: Stack( children: <Widget>[ ListView( children: <Widget>[ ContactCard("Juan Manuel", 7, "assets/profile_1.jpg", enable: false), Divider(), ContactCard("Nuria Sofia", 5, "assets/profile_2.jpeg"), Divider(), ContactCard("Oscar Tito", 10, "assets/profile_3.jpg"), Divider(), ContactCard("Roberto Julian", 4, "assets/profile_4.jpeg"), Divider(), ContactCard("Maria Alexandra", 15, "assets/profile_5.jpeg"), ], ) ], ), ); } }
custom_app_bar.dart
import 'package:flutter/material.dart'; import 'app_bar_shape.dart'; class CustomAppBar extends StatefulWidget implements PreferredSizeWidget { final Widget title; final bool centerTitle; final Widget navigatorButton; CustomAppBar({this.title, this.centerTitle = false, this.navigatorButton}); @override State<StatefulWidget> createState() => _CustomAppBarState(); @override Size get preferredSize => Size.fromHeight(kToolbarHeight + 32); } class _CustomAppBarState extends State<CustomAppBar> { @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(bottom: 0), child: Stack( children: <Widget>[ Material( elevation: 1, color: Colors.yellow, shape: AppBarShape(), clipBehavior: Clip.antiAliasWithSaveLayer, child: Container( height: widget.preferredSize.height + 20, decoration: BoxDecoration( image: DecorationImage( image: AssetImage("assets/place.jpg"), fit: BoxFit.cover, colorFilter: ColorFilter.mode( Color.fromRGBO(65, 130, 184, 0.85), BlendMode.srcATop ) ) ), ), ), _getAppBar() ], ), ); } Widget _getAppBar() { return Container( margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top), height: kToolbarHeight, width: double.maxFinite, child: Stack( children: _getList(), ), ); } Widget _getTitle() { Widget wTitle = widget.title != null ? widget.title : Container(); return widget.centerTitle ? Center(child: wTitle) : Container(padding: EdgeInsets.only(left: 50), child: wTitle); } List<Widget> _getList() { List<Widget> list = List(); list.add(_getTitle()); if (widget.navigatorButton != null) { list.add(widget.navigatorButton); } return list; } }
app_bar_shape.dart
import 'package:flutter/material.dart'; class AppBarShape extends ContinuousRectangleBorder { @override Path getOuterPath(Rect rect, {TextDirection textDirection}) { Path path = Path(); double curveSize = 30; double heigth = rect.height - curveSize; double block = rect.width / 8; path.lineTo(0, heigth); path.lineTo(block, heigth + 0.03 * curveSize); var controlPoint = Offset(block + block * 0.5, heigth + 0.03 * curveSize); var endPoint = Offset(block * 2 + 0.2 * block, heigth + 0.2 * curveSize); path.quadraticBezierTo( controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy); controlPoint = Offset(block * 4, heigth + curveSize); endPoint = Offset(block * 6, heigth + 0.2 * curveSize); path.quadraticBezierTo( controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy); controlPoint = Offset(block * 6 + 0.5 * block, heigth + 0.03 * curveSize); endPoint = Offset(block * 7, heigth + 0.03 * curveSize); path.quadraticBezierTo( controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy); path.lineTo(block * 8, heigth); path.lineTo(block * 8, 0); path.close(); return path; } }
contact_card.dart
import 'package:flutter/material.dart'; class ContactCard extends StatelessWidget { final String name; final int experience; final String pathImage; final bool enable; ContactCard(this.name, this.experience, this.pathImage, {this.enable = true}); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(12), child: Row( children: <Widget>[ Container( height: 50, width: 50, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( image: AssetImage(pathImage), fit: BoxFit.cover ) ), ), Container(width: 12), Flexible( fit: FlexFit.tight, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( name, style: TextStyle( fontWeight: FontWeight.bold ), ), Container(height: 8.0), Text("Experience: ${experience < 10 ? "0" : ""}$experience years") ], ), ), Container( height: 40, width: 40, child: Center( child: Icon( Icons.mail, color: enable ? Colors.white : Colors.black45 ), ), decoration: BoxDecoration( shape: BoxShape.circle, color: enable ? Colors.red : Colors.grey.withOpacity(0.5) ), ) ], ), ); } }
Se nota que tienes experiencia en Flutter. Gracias por haber publicado tu código, me orientó mucho.
