close

Создание пользовательского интерфейса с помощью Scaffold и AppBar в Flutter

В Flutter, вы можете создать простой, но мощный пользовательский интерфейс, используя Scaffold и AppBar виджеты. Scaffold предоставляет базовую структуру приложения с такими общими элементами, как панель приложения, тело приложения и кнопки навигации. AppBar является частью Scaffold и содержит заголовок приложения и параметры навигации.

Ниже приведено руководство о том, как создать простой пользовательский интерфейс с помощью Scaffold и AppBar:

Создать новое Flutter приложение

Сначала создайте новое Flutter приложение, выполнив следующую команду в папке terminal:

flutter create app_name

(Замените app_name на желаемое имя вашего приложения).

Отредактируйте файл main.dart

В файле main.dart(внутри папки lib) замените содержимое следующим:

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

В приведенном выше примере мы создаем приложение с помощью Scaffold и AppBar. Содержит и Scaffold тело AppBar пользовательского интерфейса, переданное свойству body.

Запустите приложение

Наконец, чтобы запустить приложение, выполните следующую команду в папке terminal:

flutter run

Ваше приложение отобразит экран с заголовком « Flutter Приложение с Scaffold и AppBar » на панели приложений и текстом Hello, world!  в центре экрана.

 

Вывод: Scaffold и AppBar это два важных виджета Flutter, которые помогут вам создать простой и функциональный пользовательский интерфейс. Используя их, вы можете создавать привлекательные приложения с основными компонентами пользовательского интерфейса, такими как панель приложения и тело приложения.