21 octubre, 2024

Diseño de una Interfaz en Flutter

Para hacer una interfaz o pantalla con botones en Flutter debemos usar columnas y filas para obtener un menú de opciones en nuestra aplicación móvil

Suscríbete a nuestro canal en Youtube

Suscríbirse

¿Cómo diseñar una interfaz con Flutter?

Para empezar a diseñar un a interfaz debemos usar Dart. Dart es un lenguaje muy potente, además también usaremos el 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

La idea  es obtener una pantalla elegante con un menu de opciones muy rápidamente.

Ésta interfaz es una pantalla inicial que tiene una imagen de fondo en la parte superior, la idea es integrar botones desde la parte inferior de la imagen, los botones tendrán una distribución en pares, es decir de a dos. Lo puedes usar para customizar como desees en tu proyecto.

Código Dart de una interfaz de una app 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.

 


Leido 17038 veces | 1 usuarios

Descarga del código fuente Flutter de Diseño de una Interfaz en Flutter

62 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


App restaurant con pedidos en Flutter

USD 11.00

Descarga del código fuente

App restaurant con pedidos en Flutter

Más tutoriales de Flutter

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025