Diseño UI de interfaces

Diseño de interfaces UI en Flutter

INDICE

1. Presentación del tutorial Flutter UI
2. Implementación de un Splash Screen Flutter
3. Diseño de una pantalla de Login
4. Diseño de una pantalla Menú
5. Diseño de una pantalla de Detalle

Diseño UI Splash

¿Qué es un Splash Screens?

Las splash screens son elementos visuales en una aplicación que contribuyen a una mejor experiencia de usuario. Esta pantalla de bienvenida es una de las pantallas más vitales de la aplicación. Esta puede ser cambiada a un diseño personalizado que muestre su pantalla de inicio. De esta manera, la pantalla de inicio solo se muestra cuando es necesario y no ralentiza a los usuarios. Normalmente se ejecutan durante el proceso de carga de la App. Se implementa en código nativo. Para tal efecto en este tutorial lo haremos para el SO Android.

main/res/values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#0B5DAE</color>
</resources>

main/res/drawable/bg_color.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/primary"/>
</shape>

Modificar main/res/drawable/launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_color" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/codeando" />
    </item>
</layer-list>

Ojo, si quieren agregar Splash Screen con animaciones tendrían que hacer esperar al usuario como se hacía antes, esto no es una buena práctica es incorrecta; testea si todo esta bien, si al iniciar la aplicación se muestra la pantalla blanca y después aparece el “Splash Screen” es incorrecto.

Diseño UI Login

import 'package:flutter/material.dart';
import 'package:flutterui/menucategorias.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,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    TextEditingController email = new TextEditingController();
    TextEditingController password = new TextEditingController();

    return Scaffold(

      body: Center(
        child: Padding(
          padding: EdgeInsets.all(50),
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: email,
              decoration: InputDecoration(
                  hintText: "username@email.com"
              ),
            ),
            TextField(
              controller: password,
              obscureText: true,
              decoration: InputDecoration(
                  hintText: "Password",

              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 30),
              width: 200,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(20),
              ),
              child: FlatButton(
                onPressed: (){
                  Navigator.push(context, MaterialPageRoute(builder: (_) => MenuCategorias()));
                },
                child: Text(
                  'LOGIN',
                  style: TextStyle(color:Colors.white,fontSize: 20),
                ),
              ),
            ),
            SizedBox( height: 200,),
            Text('Nuevo usuario ? Crea una cuenta')
          ],
        ),
        ),
      ),
    );
  }
}

Diseño UI Menú

class Categoria{
  int id;
  String nombre;
  String urlfoto;

  Categoria(this.id, this.nombre, this.urlfoto);
  Categoria.map(dynamic o){
    this.id = o["id"];
    this.nombre = o["nombre"];
    this.urlfoto = o["urlfoto"];
  }
  int get _id => id;
  String get _nombre => nombre;
  String get _urlfoto => urlfoto;

  Map<String, dynamic> toMap(){
    var map = new Map<String, dynamic>();
    map['id'] = id;
    map['nombre'] = nombre;
    map['urlfoto'] = urlfoto;
    return map;
  }

}
final Menu =[
  new Categoria(1,"Flutter","flutter.jpg"),
  new Categoria(2,"React Native","react.jpg"),
  new Categoria(3,"Android","android.jpg"),
  new Categoria(4,"IOS","ios.jpg"),
];

import 'package:flutter/material.dart';
import 'package:flutterui/categoria.dart';
import 'package:flutterui/detalles.dart';
class MenuCategorias extends StatefulWidget {
  @override
  _MenuCategoriasState createState() => _MenuCategoriasState();
}

class _MenuCategoriasState extends State<MenuCategorias> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("MENU"),
      ),
      body: Container(
        child: GridView.builder(
          itemCount: Menu.length,
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemBuilder: (context,index){
            return Container(
              margin: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(10)
              ),
              child: GestureDetector(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (_) => Detalles()));
                },
                child: Column(
                  mainAxisAlignment:  MainAxisAlignment.center,
                  children: [
                    new Icon(Icons.map, size: 80,),
                    Text(Menu[index].nombre)
                  ],
                ),
              )
            );
          },
        ),
      ),
    );
  }
}

Diseño UI Detalle

class Detalle{
  int id;
  String nombre;
  String urlfoto;

  Detalle(this.id, this.nombre, this.urlfoto);
  Detalle.map(dynamic o){
    this.id = o["id"];
    this.nombre = o["nombre"];
    this.urlfoto = o["urlfoto"];
  }
  int get _id => id;
  String get _nombre => nombre;
  String get _urlfoto => urlfoto;

  Map<String, dynamic> toMap(){
    var map = new Map<String, dynamic>();
    map['id'] = id;
    map['nombre'] = nombre;
    map['urlfoto'] = urlfoto;
    return map;
  }

}
final contenidodetalle =[
  new Detalle(1,"todo el espacio disponsta básica” con el que empezamos. Para revelar vista de desplazamiento” con un borde rojo grueso definido por su padre, un Widget de contenedor","flutter.jpg"),
  new Detalle(2,"todo el espacio disponible para que coincida con el tamaño de su elemeso definido por su padre, un Widget de contenedor","react.jpg"),
  new Detalle(3,"Atodo el espacio disponible para que coincida con  definido por su padre, un Widget de contenedord","android.jpg"),
  new Detalle(4,"Itodo el espacio disponible para que coincida coca” con el que empezamos. Para revelar su tamaño, envolví la “vista de d rojo grueso definido por su padre, un Widget de contenedorOS","ios.jpg"),
];

import 'package:flutter/material.dart';
import 'package:flutterui/detalle.dart';
class Detalles extends StatefulWidget {
  @override
  _DetallesState createState() => _DetallesState();
}

class _DetallesState extends State<Detalles> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("DETALLE"),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: ListView.builder(
          itemCount: contenidodetalle.length,
            itemBuilder: (context,index){
            return (index % 2 == 0)
                ? _buildItem_left(contenidodetalle[index].nombre)
                : _buildItem_right(contenidodetalle[index].nombre);
            }
        ),
      ),
    );
  }
}

Widget _buildItem_left(String textTitle) {
  return new Row(
    children: [
      Expanded( flex:1, child: new Text(textTitle),),
      Expanded( flex:1, child: new Icon(Icons.map))
    ],
  );
}

Widget _buildItem_right(String textTitle) {
  return new Row(
    children: [
    Expanded( flex:1, child:new Icon(Icons.map)),
    Expanded( flex:1, child: new Text(textTitle))
    ],
  );
}

Leido 4857 veces