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

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.

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

name: micard
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2

  admob_flutter: ^0.3.4
  google_fonts: ^0.3.9
  animate_do: ^1.0.0

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.

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

    ),
),

 

 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

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.

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.0,
                  backgroundColor: Colors.white,
                  backgroundImage: AssetImage('images/img.jpg'),
                ),

 

Widgets

Los widgets como ya se mencionaron son los siguientes:

CircleAvatar(
                  radius: 50.0,
                  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.0,
                    ),
                  ),
                ),

Card(
                  margin:
                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    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.

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.0,
                  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.0,
                    ),
                  ),
                ),
              ),
              FadeInRight(
                child: Text(
                  'Chemical engineer & Flutter Developer',
                  style: GoogleFonts.indieFlower(
                    textStyle: TextStyle(
                      color: Colors.white,
                      fontStyle: FontStyle.italic,
                      fontSize: 22.0,
                    ),
                  ),
                ),
              ),
              SizedBox(height:20.0, width: 250, child: Divider(color: Colors.white),),
              ElasticInLeft(
                child: Card(
                  margin:
                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: ListTile(
                      leading: Icon(
                        Icons.phone,
                        color: Colors.blue,
                      ),
                      title: Text('+593000000000'),
                    ),
                  ),
                ),
              ),
              ElasticInRight(
                child: Card(
                  margin:
                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: ListTile(
                      leading: Icon(
                        Icons.mail,
                        color: Colors.blue,
                      ),
                      title: Text('rjromo@espol.edu.ec'),
                    ),
                  ),
                ),
              ),
              Pulse(
                child: AdmobBanner(
                  adUnitId: 'ca-app-pub-3940256099942544/6300978111',
                  adSize: AdmobBannerSize.BANNER,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

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

 

Previous

Cómo crear un keylogger usando Python

Crea tu propia nube de palabras (Word Cloud)

Next

1 comentario en “Crea una tarjeta de presentación- tu primera aplicación Flutter”

Deja un comentario