Быстрый старт Flutter-разработчика. Андрей Алеев
Читать онлайн книгу.
имя flutter_hello_world в поле Project Name
company domain – flyflutter.ru И жмем Finish
После запуска мы сразу видим открытый файл main. dart В нем видим строчку
void main () => runApp (MyApp ());
это начальная точка приложения. Функция main () – это стартовая точка всех приложений на языке Dart. В ней мы здесь вызываем конструктор класса MyApp, который наследуется от StatelessWidget – это тип UI компонента – виджета. Подробнее про язык Dart мы поговорим во второй лекции, а про виджеты – в третьей.
Итак, слева мы видим дерево проекта, справа – редактор.
Код main. dart только что созданного проекта
Весь общий для Android и iOS код находится в папке lib. Сейчас у нас там только файл main. dart
Android Studio сгенерировала простую логики инкриментирования, мы ее пока удалим, чтобы она нас не путала, и заменим на более простой вариант
import ’package: flutter/material. dart’;
void main () => runApp (MyApp ());
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp (
title: «Flutter Demo’,
theme: ThemeData (
primarySwatch: Colors. blue,),
home: Scaffold (
appBar: AppBar (
title: Text («This is Flutter’),),
body: Center (
child: Text («Hello World!»),),),);
}
}
И жмите на иконку молнии – Hot Reload – для применения изменений.
Надо отметить, что Hot Reload во Flutter работает действительно быстро и значительно сокращает время разработки.
Ура, на экране вы должны увидеть Привет Мир!
Привет Мир! на эмуляторе
Рассмотрим код подробнее. Как уже говорилось выше, MyApp наследуется от StatelessWidget, это неизменяемый UI компонент – виджет. Вообще, все во Flutter – это виджеты, и приложение тоже. В виджете мы переопределяем метод build, в котором указывается что и как отрисовать.
В нашем примере мы возвращаем объект MaterialApp, который создаем посредсвом конструктора. А в конструктор передаем название, тему и виджет home, которому назначем Scaffold – скелет приложения, который в своб очередь содержит appBar и body. Здесь уместна аналогия с HTML, где также есть тайтлы и body.
Давайте немного увеличим текст и поиграем цветами:
home: Scaffold (
backgroundColor: Colors.red,
appBar: AppBar (
title: Text («This is Flutter’),),
body: Center (
child: Text («Hello World!»,
style: TextStyle (
fontSize: 42.0, // делаем текст большим
fontWeight: FontWeight.bold, // жирным
color: Colors. white, // белым
)
),
),
),
Виджету Scaffold мы задали красный фон, а виджету текста применили стиль, чтобы сделать его больше и заметнее.
Привет, Мир! на Андроид
Преимущество Flutter в том, что вся логика работы с внешним видом приложения (UI) прописывается в коде на том же языке, что и бизнес-логика – на dart. Нет необходимости залезать в папку с ресурсами и редактировать xml верстку.
Запускаем Hello World на iOS
Мы же пишем кроссплатформенный код! Давайте запустим