Flutter: основные принципы построения приложения
Минимальное приложение Flutter, это:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false, //убираем надпись debug
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
},далее обычно начинают плясать именно от этого шаблона. Запускаем, смотрим…и ничего кроме квадратика с названием окна не видим. Ну собственно ничего более и нет.
Одной из «киллер фич» Flutter считается, что всё что визуально расположено на экране — это виджеты вложенные друг в друга. С «детьми» и «родителями». Принцип разметки примерно такой же как в HTML + CSS: кидаем в «стартовый» виджет другие виджеты различного вида , и добавляем к ним «украшения». В данном случае внутри стартового виджета ничего нет.
Второй «киллер фичей» флаттера является так называемый HotReload — при изменении кода программы, и последующем его изменении, запущеная ранее программа не закрывается, а «обновляется» на лету. Если конечно код не изменен «кардинально»
Добавляем файл-основной экран page1.dart:
import 'package:flutter/material.dart';
class Page1 extends StatefulWidget {
_Page1State createState() => _Page1State(); // сюда передаем текущее состояние страницы
}
class _Page1State extends State<Page1> { // _ впереди класса, означает чтоб скрыть доступ из другх файлов
@override
Widget build(BuildContext context) {
return Scaffold( // чаще всего используемый "корневой" виджет, который позволяет добавлять в себя другие: AppBar, BottomNavigationBar,Drawer, FloatingActionButton и т.п.
appBar: AppBar(title: Text("Home page")),
body: Center(
child: Text(
"Ууу как всё запущено пациент..",
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline3,
)
)
);
}
}
И далее добавляем в main,dart строчки:
В результате запуска получаем что-то типа:
