Isai Ismael Sandoval Ccaccro

CURSO DE FLUTTER

PROGRAMAS A UTILIZAR
  1. Visual Studio Code Es un editor de codigo fuente desarrollado por Microsoft. Utilizaremos este programa por que es más ligero y tiene mas opciones a diferencia de otros
REQUISITOS BÁSICOS
  1. Lógica de programacion
CONCEPTOS BÁSICOS
Flutter es un kit de herramientas de UI(interfaz de usuario) de google para realizar hermosas aplicaciones nativamente, para movil, web y escritorio desde una unica base de codigo
  1. Rapido desarrollo (android-ios)
  2. Interface de usuario expresiva y flexible (widget->control total)
  3. Alto rendimiento
EXTENSIONES vsc
  1. Flutter
  2. flutter widget snippets
  3. awesome flutter snippets
CONFIGURACION
    Paso 1
  1. instalar SDK
  2. descomprimir
  3. copiar la carpeta flutter en el disco C:
    Paso 2
  1. buscar en inicio (variables de entorno)
  2. click en variables de entorno
  3. editar en PATH
  4. agregar la siguiente (C:\flutter\bin)
    Paso 3
  1. probar que flutter funcione
  2. ejecuta en CMD (flutter doctor)
  3. es necesario que ejecutes desde C:users/I3
  4. se descargaran algunos packetes
  5. ejecuta para LA LICENCIA (flutter doctor --android-licenses)
  6. reinicia VSC
    Paso 4 Instalar Genymotion
  1. Instalar VirtualBox
  2. Instalar Genymotion
    Nuevo proyecto
  1. (VSC) click en ver
  2. paleta de comandos
  3. flutter
  4. nuevo proyecto
  5. select device(para agregar un dispositivo)
  6. si aparece un error de gradle -> por favor elija bien el EMULADOR
TIPOS DE DATOS
  1. int
  2. double
  3. String
  4. bool
  5. dynamic
  6. List<String> nombres = ["isai", "juan", "pedro", "maria", "jose"];
  7. var
CASTING
  1. cadena a int
  2. cadena para double
  3. int a cadena
  4. double a cadena
// String to int
var one = int.parse('1');

// String to double
var onePointOne = double.parse('1.1');

// int to String
String twenty = 20.toString();

// double to String
String pi= 3.14316.toStringAsFixed(2);
Dart
SINTAXIS
//Nos permite trabajar con los diseños de layouts de Material Design
import 'package:flutter/material.dart';

//Es el primer metodo en ejecutarse al correr(ejecutar) la APK
void main() {
    runApp(MiApp());
}

class MiApp extends StatelessWidget {
    const MiApp({Key key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: "app",
            home: Inicio(),
        );
    }
}

class Inicio extends StatefulWidget {
    Inicio({Key key}) : super(key: key);

    @override
    _InicioState createState() => _InicioState();
}

class _InicioState extends State<Inicio> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Menu de navegacion"),
            ),
            body: Center(
                child: Text("hola mundo"),
            ),
        );
    }
}
Dart
QUE ES UN WIDGET
Un widget es un elemento de una interfaz gráfica de usuario.
return MaterialApp(
    title: "App",
    home: Inicio(),
);
Dart
QUE ES MaterialApp
MaterialApp es un widget que nos proporciona un layout orientado a Material Design. Para utilizarlo, en la llamada al método runApp creamos una nueva instancia y se lo pasamos de la siguiente forma. El widget MaterialApp tiene como atributos entre otros: title El título de la app.
return MaterialApp(
    title: "App",
    home: Inicio(),
);
Dart
QUE ES Scaffold
Es una estructura que nos permite organizar nuestras pantallas.
Es la parte donde se encuentra todo el contenido que se va a mostrar en la pantalla. Un Scaffold puede contener las siguientes propiedades
  1. appBar
  2. backgroundColor
  3. body
  4. bottomNavigationBar
  5. drawer
  6. endDrawer
  7. floatingActionButtom
  8. bottomSheet
return Scaffold(
    appBar: AppBar(
        title: Text("Sandoval Apk"),
    ),
    body: Text("Hola mundo"),
    drawer: Drawer(),
    endDrawer: Drawer(),
    backgroundColor: Colors.red,
    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
    ),
);
Dart
StatelessWidget
Es un widget sin estado o tambien llamado constante; Es considerado de esa forma porque todos los contenidos que están dentro NO pueden cambiar su valor en tiempo de ejecucion.
class MiApp extends StatelessWidget {
    const MiApp({Key key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: "App",
        home: Inicio(),
      );
    }
}
Dart
StatefulWidget
Es un widget con estado es todo lo contrario del StatelessWidget. En este caso los contenidos que entán dentro SI pueden cambiar de valor en tiempo de ejecucion.
class Inicio extends StatefulWidget {
    Inicio({Key key}) : super(key: key);

    @override
    _InicioState createState() => _InicioState();
  }

  class _InicioState extends State<Inicio> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Sandoval Apk"),
        ),
        body: Text("Hola mundo"),
      );
    }

    @override
    void initState() {
        //TODO code here
        super.initState();
    }
    @override
    void dispose() {
        //TODO code here
        super.dispose();
    }

}
Dart
PROPIEDADES EN APPBAR
  1. LEADING
  2. TITLE
  3. ACCION
  4. BACKGROUNDCOLOR
  5. ELEVATION
  6. SHAPE
TITLE nos permite agregar un titulo
title: Text("Sandoval Apk"),
Dart
ACCION nos permite agregar botones en la parte derecha
actions: <Widget>[
    IconButton(
      icon: Icon(Icons.add),
      onPressed: () {
        _agregar();
      },
    ),
    IconButton(
      icon: Icon(Icons.remove),
      onPressed: () {
        _quitar();
      },
    ),
  ],
Dart
BACKGROUNDCOLOR nos permite agregar color de fondo
backgroundColor: Colors.red, //color de fondo
Dart
LEADING agregar boton de volver atras
leading: IconButton(
//boton volver atras
icon: Icon(
    Icons.arrow_back,
),
onPressed: () {},
),
Dart
ELEVATION nos permite agregar sombre del appBar
elevation: 100, //es la sombra
Dart
SHAPE nos permite agregar bordes redondeados
shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(5),
),
Dart
PROPIEDADES EN BODY
  1. ICON
  2. TEXT
ICON nos permite agregar iconos
body: Icon(
    Icons.close,
    size: 50.0,
    //color: Colors.red,
    //color: Theme.of(context).primaryColor,
    color: Color.fromRGBO(0, 0, 255, 1),
),
Dart
TEXT nos permite agregar textos
body: Text(
    "Hola Mundo",
    textAlign: TextAlign.center,
    style: TextStyle(
        color: Colors.green,
        backgroundColor: Colors.black,
        fontSize: 25.0,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.underline,
        fontWeight: FontWeight.bold,
    ),
),
Dart
WIDGETS
LIST VIEW
List<String> nombres = ["isai", "juan", "pedro", "maria", "jose"];

body: ListView.builder(
    itemCount: nombres.length,
    itemBuilder: (BuildContext context, int index) {
        return Card(
            child: Text(
            nombres[index],
            ),
        );
    },
),
Dart
IMAGE
assets:
- assets/img1.png
// en pubspec.yaml

Image.network("https://sm.ign.com/t/ign_latam/screenshot/default/naruto4_st6s.1280.jpg"),
Image.asset("./assets/img1.png"),
Dart
TEXT FIELD
//  CAMPO TIPO NUMERICO
body: TextField(
    keyboardType: TextInputType.number,
    style: Theme.of(context).textTheme.headline6, //tamaño de texto
    decoration: InputDecoration(
        icon: Icon(Icons.account_circle, size: 20),
        labelText: "Ingrese su numero",
        border: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
            Radius.circular(5.0),
        )),
    ),
),



//  CAMPO TIPO TEXT-AREA
body: TextField(
    maxLines: 10,
    textCapitalization: TextCapitalization.sentences,
    decoration: InputDecoration(
        counterText: "palabras",
        labelText: "Comentarios",
        hintText: "Este es el placeholder",
        border: const OutlineInputBorder(),
    ),
),


//  CAMPO TIPO PASSWORD

class _InicioState extends State<Inicio> {
    @override
    bool verClave = false;
    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text("Menu de navegacion"),
        ),
        body: TextField(
        obscureText: !this.verClave,
        decoration: InputDecoration(
            labelText: "Contraseña",
            prefixIcon: const Icon(
            Icons.security,
            ),
            suffixIcon: IconButton(
            icon: Icon(
                Icons.remove_red_eye,
                color: this.verClave ? Colors.blue : Colors.grey,
            ),
            onPressed: () {
                setState(() {
                this.verClave = !this.verClave;
                });
            },
            ),
            hintText: "Este es el placeholder",
            border: const OutlineInputBorder(),
        ),
        ),
    );
    }
}
Dart
TEXT FORM FIELD
// NOMBRE DE USUARIO
body: TextFormField(
    textCapitalization: TextCapitalization.words,
    decoration: const InputDecoration(
        border: UnderlineInputBorder(),
        filled: true,
        icon: Icon(Icons.person),
        hintText: 'Cual es tu nombre',
        labelText: 'Nombre *',
    ),
),


// NUMERO DE TELEFONO
body: TextFormField(
    decoration: const InputDecoration(
        border: UnderlineInputBorder(),
        filled: true,
        icon: Icon(Icons.phone),
        hintText: 'Cual es tu numero',
        labelText: 'Telefono *',
        prefixText: '+51',
    ),
),


// CORREO
body: TextFormField(
    decoration: const InputDecoration(
        border: UnderlineInputBorder(),
        filled: true,
        icon: Icon(Icons.email),
        hintText: 'Cual es tu correo e',
        labelText: 'Correo',
    ),
),


// TEXT-AREA
body: TextFormField(
    decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: 'Cuentame acerca de ti',
        helperText: 'Ingrese una breve historia',
        labelText: 'Historia',
    ),
    maxLines: 3,
),


// MONEDA
body: TextFormField(
    keyboardType: TextInputType.number,
    decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Salario',
        prefixText: '\S/.',
        suffixText: 'SOLES',
        suffixStyle: TextStyle(color: Colors.green),
    ),
),


// CONTRASEÑA
Dart
BOTONES
RaisedButton(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
    ),
    color: Colors.green,
    textColor: Colors.white,
    child: Text("presiona"),
    onPressed: () {},
),
FlatButton(
    child: Text("presiona"),
    onPressed: () {},
),
IconButton(
    icon: Icon(Icons.delete),
    onPressed: () {},
),
OutlineButton(
    onPressed: () {},
    child: Text("boton"),
),
FloatingActionButton(
    child: Icon(Icons.add),
    backgroundColor: Colors.red,
    onPressed: () {},
),
Dart
ROUTES
//home: Inicio(),
initialRoute: "/",
routes: {
    "/":        (BuildContext context) => Inicio(),
    "/pagina2":  (BuildContext context) => Pagina2(),
},
Dart
RECIBIR ARGUMENTOS DE RUTAS
class _Pagina2State extends State<Pagina2> {
    @override
    Widget build(BuildContext context) {
      Pagina2Argumentos argumentos = ModalRoute.of(context).settings.arguments;
      return Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Text(argumentos.nombre + " " + argumentos.apellido),
        ),
      );
    }
  }

  class Pagina2Argumentos {
    String nombre;
    String apellido;
    Pagina2Argumentos({this.nombre, this.apellido});
  }
Dart
EVENTOS O GestureDetector
Se utiliza para dar acciones cuando el usuario realice cualquier cambio.
child: GestureDetector(
    onTap: () {
        print("Diste un click");
    },
    onLongPress: () {
        print("Manteniste presionado");
    },
    child: Text(
        "Hola",
        style: TextStyle(fontSize: 50),
    ),
),
Dart
VALIDACION DE FORMULARIO
Se utiliza para validar campos de texto.
//CREANDO LAS VARIABLES DE RECEPCION
String txtNombre;
String txtApellido;
final formKey = GlobalKey<FormState>();

//INICIO DEL FORMULARIO
Form(
    key: formKey,
    child: Column(
        children: [
            TextFormField(
                decoration: InputDecoration(labelText: "Nombre"),
                onSaved: (value) {
                    this.txtNombre = value;
                },
                validator: (value) {
                    if (value.isEmpty) {
                        return "Campo vacio";
                    } else {
                        return null;
                    }
                },
            ),
            TextFormField(
                decoration: InputDecoration(labelText: "Apellido"),
                onSaved: (value) {
                    this.txtApellido = value;
                },
                validator: (value) {
                    if (value.isEmpty || value.trim() == "") {
                        return "Campo vacio";
                    } else {
                        return null;
                    }
                },
            ),
        ],
    ),
),

//GUARDANDO LOS DATOS Y ENVIANDO A LA OTRA PAGINA
void _showPagina3() {
    if (formKey.currentState.validate()) {
        formKey.currentState.save();
        Navigator.of(context).pushNamed(
            "/pagina3",
            arguments: ArgumentosPagina3(nombre: this.txtNombre, apellido: this.txtApellido),
        );
    }
  }
Dart
TIPOS DE TECLADO
keyboardType: TextInputType.text,
keyboardType: TextInputType.number,
keyboardType: TextInputType.phone,
keyboardType: TextInputType.emailAddress,
Dart
DRAWER COMPLETO
class _InicioState extends State<Inicio> {
    final _scaffKey = GlobalKey<ScaffoldState>();
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        //llave
        key: _scaffKey,
        drawer: _getDrawer(context),
        floatingActionButton: FloatingActionButton(
          child: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              _scaffKey.currentState.openDrawer();
            },
          ),
        ),

      );
    }

    //contenido del drawer
    Widget _getDrawer(BuildContext context) {
      return Drawer(
        child: ListView(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.black12),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Image.network(
                      "https://www.logaster.com/blog/wp-content/uploads/2018/05/Canva.png"),
                  Text("Uso de drawer")
                ],
              ),
            ),
            ListTile(
              title: Text("Inicio"),
              leading: Icon(Icons.home),
              onTap: () {
                _showHome(context);
              },
            )
          ],
        ),
      );
    }

    void _showHome(BuildContext context) {
      Navigator.pop(context);
    }
}
Dart
NOTIFICACION SNACKBAR
void _mostrarNotificacion() {
    SnackBar snackBar = SnackBar(
        content: Text("Elemento eliinado"),
        backgroundColor: Colors.red[500],
        action: SnackBarAction(
            label: "Cancelar",
            textColor: Colors.white,
            onPressed: () {},
        ),
    );
    _scaffKey.currentState.showSnackBar(snackBar);
}
Dart
OTROS COMANDOS
//TEXTO SUBRAYADO
TextStyle(decoration: TextDecoration.underline)
Dart