Flutter: Виджеты и решение ошибки в папке test

Устранение ошибки в папке test

Удалите папку test из проекта, щелкнув по ней правой кнопкой мыши и выбрав «Удалить». Это устранит ошибку.

Виджеты в Flutter

Виджеты – это строительные блоки интерфейса Flutter. Это могут быть текстовые надписи, кнопки, поля ввода, изображения и другие элементы. В этом уроке мы создадим приложение, используя несколько основных виджетов.

Создание простого приложения

Создадим класс MyApp, наследующий от StatelessWidget. Метод build() возвращает виджет, определяющий интерфейс приложения. Начнём с MaterialApp, который предоставляет базовые стили и возможности Material Design.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Айти Прогер'),
    );
  }
}

Стилизация текста

Добавим стили к текстовой надписи, используя TextStyle:

return MaterialApp(
  home: Text(
    'Айти Прогер',
    style: TextStyle(
      fontSize: 20,
      color: Colors.red,
      fontFamily: 'Times New Roman'
    ),
  ),
);

Тема приложения

Для настройки общей темы приложения используем свойство theme в MaterialApp:

return MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.deepOrangeAccent,
  ),
  home: //...
);

Организация виджетов с помощью Scaffold

Для размещения нескольких виджетов используем Scaffold:

return MaterialApp(
  theme: ThemeData(primaryColor: Colors.deepOrangeAccent),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Айти Прогер', textAlign: TextAlign.center),
    ),
    body: Center(
      child: Text('Айти Прогер', style: TextStyle(fontSize: 20, color: Colors.red, fontFamily: 'Times New Roman')),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () { print('Клик'); },
      child: Text('Нажми'),
      backgroundColor: Colors.deepOrangeAccent,
    ),
  ),
);

Scaffold содержит AppBar (верхняя панель), body (основное содержимое) и floatingActionButton (плавающая кнопка). Center центрирует дочерний виджет.

Обработка событий

Метод onPressed в FloatingActionButton обрабатывает нажатие кнопки. В данном примере, при нажатии выводится сообщение «Клик» в консоль.

Использование собственных шрифтов

Скачайте шрифт (например, с fonts.google.com).
Создайте папку fonts в корне проекта и поместите туда скачанный шрифт.
В файле pubspec.yaml, в секции flutter:, добавьте описание шрифта:

flutter:
  fonts:
    - family: Goblin One
      fonts:
        - asset: fonts/GoblinOne-Regular.ttf

Замените Goblin One и GoblinOne-Regular.ttf на ваши значения. Выполните flutter pub get. Теперь можно использовать шрифт в TextStyle:

style: TextStyle(fontFamily: 'Goblin One')

В этом уроке мы рассмотрели основные виджеты Flutter: Text, MaterialApp, Scaffold, AppBar, Center, FloatingActionButton, изучили их стилизацию и добавление собственных шрифтов. Для получения дополнительной информации, обратитесь к официальной документации Flutter ([ссылка на документацию](заменить на реальную ссылку)).