Construindo UI com Scaffold e AppBar em Flutter

No Flutter, você pode criar uma interface de usuário simples, porém poderosa, usando widgets Scaffold e AppBar. Scaffold fornece uma estrutura básica para um aplicativo com elementos comuns, como a barra do aplicativo, o corpo do aplicativo e os botões de navegação. AppBar faz parte Scaffold e contém o título do aplicativo e as opções de navegação.

Abaixo está um guia sobre como construir uma interface de usuário simples usando Scaffold e AppBar:

Criar um novo Flutter aplicativo

Primeiro, crie um novo Flutter aplicativo executando o seguinte comando no terminal:

flutter create app_name

(Substitua app_name pelo nome desejado do seu aplicativo).

Edite o arquivo main.dart

No arquivo main.dart(dentro da pasta lib), substitua o conteúdo pelo seguinte:

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!'),  
     ),  
   );  
  }  
}  

No exemplo acima, criamos um aplicativo com Scaffold e AppBar. O Scaffold contém o AppBar e o corpo da interface do usuário passado para a body propriedade.

Execute o aplicativo

Por fim, para executar o aplicativo, execute o seguinte comando no terminal:

flutter run

Seu aplicativo exibirá uma tela com o título " Flutter Aplicativo com Scaffold e AppBar " na barra de aplicativos e o texto Hello, world!  no centro da tela.

 

Conclusão: Scaffold e AppBar são dois widgets essenciais para Flutter ajudá-lo a construir uma interface de usuário simples e funcional. Ao usá-los, você pode criar aplicativos atraentes com componentes básicos de interface do usuário, como a barra de aplicativos e o corpo do aplicativo.