Diseño de una Interfaz en Flutter

Cómo diseñar una interfaz en Flutter con Android Studio

VIDEO Cómo diseñar una interfaz en Flutter con Android Studio

Veremos el diseño de una interfaz con botones en Flutter, para usaremos columnas y filas para obtener un menu de opciones para nuestra App en Flutter


Diseño de una Interfaz en Flutter

Cómo diseñar una interfaz en Flutter con Android Studio

Como diseñar una Interfaz en Flutter

Dart es un lenguaje muy potente, además del sdk de Flutter, el cual que nos permite de forma muy rápida crear interfaces con un buen diseño, ¿por qué? porque simplemente nos da acceso a todos los atributos de cada elemento, en este caso utilizaremos los widgets : raisedbutton, container, row, column obteniendo una pantalla para un menu de opciones muy rápidamente.

 

CODIGO DART DE UNA PANTALLA EN FLUTTER

Aqui parte del código de la app

import 'package:flutter/material.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: Scaffold(
          body: Container(
            padding: EdgeInsets.only(
              top: 130,
              bottom: 10,
              right: 10,
              left: 10
            ),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(
                        "https://cdn.passporthealthglobal.com/wp-content/uploads/2018/08/vacunas-consejos-peru.jpg"),
                    alignment: Alignment.topCenter)),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: RaisedButton(
                            color: Colors.white,
                            shape: new RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10.0)),
                            onPressed: () {},
                            child: SizedBox(
                              width: 100,
                              height: 100,
                              child: Center(
                                child: Text("OPTION 1",
                                    textAlign: TextAlign.center),
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.all(10),
                          child: RaisedButton(
                            color: Colors.white,
                            shape: new RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10.0)),
                            onPressed: () {},
                            child: SizedBox(
                              width: 100,
                              height: 100,
                              child: Center(
                                child: Text("OPTION 2",
                                    textAlign: TextAlign.center),
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
  
              ],
            ),
          ),
        ));
  }
}

Incluso la manipulación de container nos permite darle un padding, background, para poder colocar una imagen.

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Diseño de una Interfaz en Flutter?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 2078 veces | Publicado hace 7 meses

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019