Crea una tarjeta de presentación- tu primera aplicación Flutter

Crea una tarjeta de presentación- tu primera aplicación Flutter

 

Si has llegado a esta publicación es porque estás aprendiendo flutter, te felicito por ello, la mejor manera de aprender a programar es a través de casos reales. En este tutorial te enseñaré a crear una aplicación principal en flutter para todo programador. Tu aplicación de presentación.

micard

 

Implementaremos  animaciones para los widgets tarjetas Card, usaremos otros tipos de fuentes y por último añadiremos un banner de publicidad admob.

Para facilidad y rapidez usaremos las librerias animate_do (creada por Fernando Herrera), google_fonts y admob_flutter

Índice()

    Widgets y estructura

    A breves rasgos, la estructura consiste en una columna en la que sus widgets hijos son (en orden descendente): CircleAvatar, Text, Card.

    Habrá 2 widgets Text en los que irán nuestro nombre y nuestra breve descripción como por ejemplo "Flutter Developer", abajo de estos pondremos 2 widgets Card.

    [wp_ad_camp_1]

    En estos Card irá nuestra información de contacto: número telefónico y correo electrónico. Usamos Card para que tenga un aspecto más suave en los bordes, además de que estos nos permiten añadir de manera ordenada los íconos y textos dentro del mismo y de forma más fácil sin tanta repetición de código.

     

    Añadiendo las librerias

    En el archivo pubspec.yaml debajo de la sección dependencies escribimos el nombre de las librerías junto con el número de la versión.

    admob_flutter: ^0.3.4
    google_fonts: ^0.3.9
    animate_do: ^1.0.0
    [wp_ad_camp_2]

    name: micard
    description: A new Flutter project.
    
    version: 1..+1
    
    environment:
      sdk: ">=2.1.0 <3.0.0"
    
    dependencies:
      flutter:
        sdk: flutter
    
      cupertino_icons: ^.1.2
    
      admob_flutter: ^.3.4
      google_fonts: ^.3.9
      animate_do: ^1..
    
    dev_dependencies:
      flutter_test:
        sdk: flutter
    
    
    
    flutter:
    
      uses-material-design: true
      assets:
       - images/
    

     

    Añadiendo Admob

    Agregaremos esta etiqueta en el archivo AndroidManifest.xml  donde el valor de "value" debe ser cambiado con su app id, en este ejemplo está puesto el de prueba por parte de admob para no generar impresiones inválidas.

    Te puede interesar:  Extensiones dart para los árboles de widgets en Flutter

    <manifest>
      <application>
        <meta-data
          android:name="com.google.android.gms.ads.APPLICATION_ID"
          android:value="ca-app-pub-3940256099942544~3347511713"/>
      </application>
    </manifest>
    

     

    Añadiendo animaciones y fuentes

     

    animate_do

    Importamos el paquete en el main.dart

    import 'package:google_fonts/animate_do.dart';
    

     

    Animar con esta librería es tan fácil y basta solo envolver nuestros widgets en las clases de animación de la librería, por ejemplo la animación FadeInLeft tiene un hijo Widget1, podemos usar la animación que querramos, en el sitio oficial de la librería podemos encontrar todas las animaciones disponibles.

    home: Scaffold(
        body: Center(
    
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
    
                FadeInLeft(child: Widget1() ),
                FadeInUp(child: Widget2() ),
                FadeInDown(child: Widget3() ),
                FadeInRight(child: Widget4() ),
                
            ],
            ),
    
        ),
    ),
    

     

    [wp_ad_camp_3]

     google_fonts

    Importamos la librería

    import 'package:google_fonts/google_fonts.dart';
    

     

    Usaremos google fonts con el TextStyle por defecto ya que solo queremos cambiar la fuente del texto.

    Si lo hacemos manualmente debemos descargar el archivo de la fuente, subirlo al directorio y referenciarlo, esto se puede volver muy complicado y tedioso si usamos muchas fuentes pero con la librería google_fonts podemos ver que basta agregar "GoogleFonts.nombredefuente()"

    Text(
      'Rubenjromo.com',
      style: GoogleFonts.lato(),
    ),
    

     

    admob_flutter

    Para este momento ya sabemos que debemos importar la librería.

    import 'package:admob_flutter/admob_flutter.dart';
    

     

    Agregar el banner de publicidad admob es tan sencillo y basta con agregar su respectivo widget junto con el id del banner.

    AdmobBanner(
      adUnitId: getBannerAdUnitId(),
      adSize: AdmobBannerSize.BANNER,
    )
    

    Podemos ver las demás opciones en la documentación de la librería

    Te puede interesar:  Flutter Arquitectura Limpia [8] – Fuente de Datos Local

    Añadiendo nuestra foto

    Por conveniencia y buena práctica, crearemos una carpeta en el directorio raíz de la aplicación y la llamaremos images, dentro de esta subiremos nuestra foto personal.

    [wp_ad_camp_4]

    Para que nuestra aplicación pueda acceder a las imágenes de nuestra carpeta debemos darle acceso a través del pubspec.yaml

    flutter:
    
      uses-material-design: true
      assets:
       - images/
    

     

    Si se fijaron al inicio del tutorial, en el archivo pubscpec.yaml completo ya está agregada esta parte.

    Ahora sí en el widget CircleAvatar podemos agregar nuestra foto.

    CircleAvatar(
                      radius: 50.,
                      backgroundColor: Colors.white,
                      backgroundImage: AssetImage('images/img.jpg'),
                    ),
    

     

    Widgets

    Los widgets como ya se mencionaron son los siguientes:

    CircleAvatar(
                      radius: 50.,
                      backgroundColor: Colors.white,
                      backgroundImage: AssetImage('images/img.jpg'),
                    ),
    
    Text(
                      'Rubén J. Romo',
                      style: GoogleFonts.quicksand(
                        textStyle: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 25.,
                        ),
                      ),
                    ),
    
    Card(
                      margin:
                          EdgeInsets.symmetric(vertical: 10., horizontal: 25.),
                      child: Padding(
                        padding: const EdgeInsets.all(10.),
                        child: ListTile(
                          leading: Icon(
                            Icons.phone,
                            color: Colors.blue,
                          ),
                          title: Text('+593000000000'),
                        ),
                      ),
                    ),
    

     

    Nótese que en el Text además de cambiarle el tipo de fuente cambié también el color y lo puse en negrita.

    [wp_ad_camp_5]

    Con respecto al widget Card este nos da la opción de usar ListTile con el cual podemos agregar un leading, title, subtitle, entre otros.

    Finalmente nuestro main.dart queda así:

    import 'package:flutter/material.dart';
    
    import 'package:admob_flutter/admob_flutter.dart';
    import 'package:google_fonts/google_fonts.dart';
    import 'package:animate_do/animate_do.dart';
    
    void main() {
      Admob.initialize('ca-app-pub-3940256099942544~3347511713');
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.blue,
            body: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  FadeInDown(
                    child: CircleAvatar(
                      radius: 50.,
                      backgroundColor: Colors.white,
                      backgroundImage: AssetImage('images/img.jpg'),
                    ),
                  ),
                  FadeInLeft(
                    child: Text(
                      'Rubén J. Romo',
                      style: GoogleFonts.quicksand(
                        textStyle: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 25.,
                        ),
                      ),
                    ),
                  ),
                  FadeInRight(
                    child: Text(
                      'Chemical engineer & Flutter Developer',
                      style: GoogleFonts.indieFlower(
                        textStyle: TextStyle(
                          color: Colors.white,
                          fontStyle: FontStyle.italic,
                          fontSize: 22.,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height:20., width: 250, child: Divider(color: Colors.white),),
                  ElasticInLeft(
                    child: Card(
                      margin:
                          EdgeInsets.symmetric(vertical: 10., horizontal: 25.),
                      child: Padding(
                        padding: const EdgeInsets.all(10.),
                        child: ListTile(
                          leading: Icon(
                            Icons.phone,
                            color: Colors.blue,
                          ),
                          title: Text('+593000000000'),
                        ),
                      ),
                    ),
                  ),
                  ElasticInRight(
                    child: Card(
                      margin:
                          EdgeInsets.symmetric(vertical: 10., horizontal: 25.),
                      child: Padding(
                        padding: const EdgeInsets.all(10.),
                        child: ListTile(
                          leading: Icon(
                            Icons.mail,
                            color: Colors.blue,
                          ),
                          title: Text('[email protected]'),
                        ),
                      ),
                    ),
                  ),
                  Pulse(
                    child: AdmobBanner(
                      adUnitId: 'ca-app-pub-3940256099942544/6300978111',
                      adSize: AdmobBannerSize.BANNER,
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    

     

    Te puede interesar:  LCR Dice - Mi 1era app flutter en PlayStore

    Si este tutorial aún te quedó confuso puedes dejar tus dudas en la caja de comentarios. Las respondo dentro de pocas horas.

     

    1. AffiliateLabz dice:

      Great content! Super high-quality! Keep it up! 🙂

    2. Dotty dice:

      Yeah bookmaking this wasn't a high risk conclusion great post!

    3. Violette dice:

      Some times its a pain in the ass to read what blog owners wrote but this web site
      is very user pleasant!

    4. Kami dice:

      I am truly glad to read this web site posts which
      contains lots of helpful facts, thanks for providing these
      data.

    5. Ruthie dice:

      Its not my first time to visit this site, i am browsing this website dailly and take nice data from
      here every day.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir