Creación de interfaz de usuario con Scaffold y AppBar en Flutter

En Flutter, puede crear una interfaz de usuario simple pero poderosa usando Scaffold y AppBar widgets. Scaffold proporciona una estructura básica para una aplicación con elementos comunes como la barra de la aplicación, el cuerpo de la aplicación y los botones de navegación. AppBar es parte Scaffold y contiene el título de la aplicación y las opciones de navegación.

A continuación se muestra una guía sobre cómo construir una interfaz de usuario simple usando Scaffold y AppBar:

Crear una nueva Flutter aplicación

Primero, cree una nueva Flutter aplicación ejecutando el siguiente comando en terminal:

flutter create app_name

(Reemplace app_name con el nombre deseado de su aplicación).

Edite el archivo main.dart

En el archivo main.dart(dentro de la carpeta lib), reemplace el contenido con lo siguiente:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}  

En el ejemplo anterior, creamos una aplicación con Scaffold y AppBar. contiene Scaffold el AppBar y el cuerpo de la interfaz de usuario pasado a la body propiedad.

Ejecute la aplicación

Finalmente, para ejecutar la aplicación, ejecute el siguiente comando en el terminal:

flutter run

Su aplicación mostrará una pantalla con el título " Flutter Aplicación con Scaffold y AppBar " en la barra de la aplicación y el texto Hello, world!  en el centro de la pantalla.

 

Conclusión: Scaffold y AppBar son dos widgets esenciales Flutter que te ayudan a construir una interfaz de usuario simple y funcional. Al usarlos, puede crear aplicaciones atractivas con componentes básicos de la interfaz de usuario, como la barra de la aplicación y el cuerpo de la aplicación.