Tercer reto

Reto:
Github

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

Me gusto mucho como quedo !!

Daniel Jussef Zamorano Silva

Hace 4 años

Wow esta super!

Usuario anónimo

User

!! Reto cumplido !!
GitHub:

Oscar Torres

Me gustó como lo desarrollaste, un código muy fluido.

Anthony Will Solsol Soplin

Me gustó, te quedó muy bien.

Antonio Gonzales Moquillaza

Oscar Torres

El reto

Ann Code

Profesor

Fabuloso!
Muy bien!

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

Me gusto mucho como quedo !!

Jhonatan Alexis Arenas Bonilla

https://github.com/AoTanuki/bestiaryApp

Intente hacer algo diferente, aun que el codigo quedo algo desordenado.

Carlos Daniel

Victor Hugo Vázquez Gómez

Por fin pude terminar 😄
Código

Diana Carolina Quintero Caro

Leer ese código fue un deleite :u

Marco Luna

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()
            ],
          )
      )
    );
  }
}

Jorge Aldair Cortés López

Angel Mambel

Oye amigo esta genial. como haces que la barra tenga ese efecto de curvatura?

Kevin Meléndez Hernández

Muy bonito header

William Mamani Cutipa

Reto Cumplido

Cristhian Alejandro Morales Herrera

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;
  }

Emmanuel Guerra Sánchez

Así quedo el mío, aunque me aleje un poco del diseño original:

Si lo quieren probar, aquí les dejo el código.

Rodrigo Guerra Castilla

https://www.youtube.com/watch?v=oAUebVIb-7s

https://dartpad.dev/4d16a8131d4d17a768befb93a374aeb5

https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0

https://www.developerlibs.com/2019/08/flutter-draw-custom-shaps-clip-path.html

https://medium.com/py-bits/clippers-in-flutter-cc6b851373d6

JAIME URQUIZU

Muy buen aporte. Esto sí es saber especificar cómo hacer algo...

Sebastián Barre

Reto finalizado, basado en https://dribbble.com/shots/6184058-e-commerce-app-exploration

Sebastián Barre

Juan Camilo Bula

Puedes dejar el codigo en git plis

Waldir Leonardo Jesus Lopez Peve

Hace 4 años

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:

René Sanchez

Esto es lo que hice para el reto!, pero no pude eso si darle la misma forma pero pude dejarlo así 😃

Tambien le agrege este efecto cuando se da tap en el email :3

Manuel Pineda Vega

Ocupé de plantilla la imagen que pusieron en el ejercicio, les comparto mi resultado.

Alejandro Cadena Florián

¿Cómo lograste hacer la curva de la AppBar? ¡Muy buen trabajo por cierto!

Manuel Pineda Vega

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;
  }

}

Paul Mauricio Realpe Guerrero

![](

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;
  }
}

Guillermo Esteban Torres Renner

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),

        ],
      ),
    );
  }

}

Pablo Rafael Cruz López