Flutter: основные принципы построения приложения
Минимальное приложение Flutter, это:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 строчки:
В результате запуска получаем что-то типа:
