Tercer reto

Clase 34 de 45 • Curso de Flutter

Clase anteriorSiguiente clase

Aprovecha las clase Widget Listview para crear tu propia lista personalizada.
Realiza una interfaz como se ve en la figura. Puedes utilizar iconos, e imágenes para las fotografías.
Créala basada en esta interfaz pero totalmente a tu gusto.
Compártenos tus resultados en la sección de discusiones.

Alexis Anderson Montenegro Reyes

student•

Reto:
Github

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Me gusto mucho como quedo !!

Daniel Jussef Zamorano Silva

student•

Wow esta super!

Usuario anónimo

user•

!! Reto cumplido !!
GitHub: https://github.com/BrayanMamani/Designers

Oscar Torres

student•

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

Anthony Will Solsol Soplin

student•

Me gustó, te quedó muy bien.

Antonio Gonzales Moquillaza

student•

Oscar Torres

student•

El reto

Ann Code

teacher•

Fabuloso!
Muy bien!

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Me gusto mucho como quedo !!

Jhonatan Alexis Arenas Bonilla

student•

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

https://github.com/AoTanuki/bestiaryApp

Carlos Daniel

student•

Victor Hugo Vázquez Gómez

student•

Por fin pude terminar 😄
Código

Diana Carolina Quintero Caro

student•

Leer ese código fue un deleite :u

Marco Luna

student•

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

student•

Angel Mambel

student•

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

Kevin Meléndez Hernández

student•

Muy bonito header

William Mamani Cutipa

student•

Reto Cumplido

Cristhian Alejandro Morales Herrera

student•

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

student•

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

student•

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

student•

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

Sebastián Barre

student•

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

Sebastián Barre

student•

Juan Camilo Bula

student•

Puedes dejar el codigo en git plis

Waldir Leonardo Jesus Lopez Peve

student•

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

student•

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

student•

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

Alejandro Cadena Florián

student•

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

Manuel Pineda Vega

student•

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

student•

![](

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

student•

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

student•

Resultado

main.dart

import 'package:flutter/material.dart';
import 'package:reto_2/reto.dart';

void main() =&gt; 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(
          &quot;DESIGNERS&quot;,
          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: &lt;Widget&gt;[
          ListView(
            children: &lt;Widget&gt;[
              ContactCard(&quot;Juan Manuel&quot;, 7, &quot;assets/profile_1.jpg&quot;, enable: false),
              Divider(),
              ContactCard(&quot;Nuria Sofia&quot;, 5, &quot;assets/profile_2.jpeg&quot;),
              Divider(),
              ContactCard(&quot;Oscar Tito&quot;, 10, &quot;assets/profile_3.jpg&quot;),
              Divider(),
              ContactCard(&quot;Roberto Julian&quot;, 4, &quot;assets/profile_4.jpeg&quot;),
              Divider(),
              ContactCard(&quot;Maria Alexandra&quot;, 15, &quot;assets/profile_5.jpeg&quot;),
            ],
          )
        ],
      ),
    );
  }
}

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&lt;StatefulWidget&gt; createState() =&gt; _CustomAppBarState();

  @override
  Size get preferredSize =&gt; Size.fromHeight(kToolbarHeight + 32);
}

class _CustomAppBarState extends State&lt;CustomAppBar&gt; {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 0),
      child: Stack(
        children: &lt;Widget&gt;[
          Material(
            elevation: 1,
            color: Colors.yellow,
            shape: AppBarShape(),
            clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Container(
              height: widget.preferredSize.height + 20,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(&quot;assets/place.jpg&quot;),
                      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&lt;Widget&gt; _getList() {
    List&lt;Widget&gt; 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: &lt;Widget&gt;[
          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: &lt;Widget&gt;[
                Text(
                  name,
                  style: TextStyle(
                    fontWeight: FontWeight.bold
                  ),
                ),
                Container(height: 8.0),
                Text(&quot;Experience: ${experience &lt; 10 ? &quot;0&quot; : &quot;&quot;}$experience years&quot;)
              ],
            ),
          ),
          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)
            ),
          )
        ],
      ),
    );
  }
}

Jaime Eduardo Falla Cardozo

student•

Se nota que tienes experiencia en Flutter. Gracias por haber publicado tu código, me orientó mucho.