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
  1. Widgets y estructura
  2. Añadiendo las librerias
  3. Añadiendo Admob
  4. Añadiendo animaciones y fuentes
    1. animate_do
    2.  google_fonts
    3. admob_flutter
  6. Añadiendo nuestra foto
  7. Widgets

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.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/

 

Te puede interesar:  ChemTap - Mi 3era app creada en Flutter y subida a PlayStore

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

    ),
),

 

[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.

Te puede interesar:  Flutter Arquitectura Limpia [9] – Fuente de Datos Remota

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.

[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.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.

[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.

Te puede interesar:  Flutter Arquitectura Limpia [14] – Interfaz del Usuario

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('[email protected]'),
                    ),
                  ),
                ),
              ),
              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.

 

Si quieres conocer otros artículos parecidos a Crea una tarjeta de presentación- tu primera aplicación Flutter puedes visitar la categoría 📱 Flutter.

  1. AffiliateLabz dice:
    25/02/2020 a las 08:22

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

  2. Dotty dice:
    24/12/2020 a las 06:18

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

  3. Violette dice:
    26/12/2020 a las 01:05

    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:
    01/01/2021 a las 02:45

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

  5. Ruthie dice:
    05/01/2021 a las 08:26

    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

Subir

Síguenos