Архивы flutter - Страница 9 из 9

Flutter: основные принципы построения приложения

30.06.2022 Павел Грибов Из жизни

Минимальное приложение 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,
      ),

    );
  }
}

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

}

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 строчки:

В результате запуска получаем что-то типа:

Оставить комментарий dart, flutter

Установка и настройка Flutter

30.06.2022 Павел Грибов Flutter

За сим открываю цикл статей по использованию платформы для разработки кросс платформенных приложений с использованием Flutter и соответственно языка Dart.

Итак, минимальный старт для начала разработки следующий:

Устанавливаем Dart
Устанавливаем Android Studio
Устанавливаем Flutter
Настраиваем Android Studio для работы с Flutter и Dart

1. Установка Dart

Заходим на https://dart.dev/get-dart/archive , скачиваем последний релиз, распаковываем в папку.

2. Скачиваем, устанавливаем Android Studio.

3. Заходим на https://docs.flutter.dev/get-started/install, скачиваем и распаковываем последний релиз Flutter

Настройка Flutter пока заключается в том, чтобы зайти в папку E:\flutter\, и запустить из командной строки

flutter_console.bat
flutter doctor

1 2	flutter_console.bat flutter doctor

Вы должны увидеть что-то типа:

Visual Studio — может использоваться вместо Android Studio. На Android Studio скорее всего у вас будет «крестик», т.е. он не настроен. Собственно далее необходимо перейти к п.4 — настройка Android Studio

4. Настройка Android Studio

Первым делом необходимо установить плагины: File -> Settings -> Plugins

После чего, перезагрузите Android Studio и снова зайдите в консоль Flutter:

flutter_console.bat
flutter doctor --android-licenses

flutter_console.bat

flutter doctor --android-licenses

И снова заходим в Android Studio и создаем проект на Flutter, предварительно выставив где находится flutter и dart:

Будет создан каркас приложения с минимальным функционалом для запуска. Выберем целевую платформу, и запустим

Оставить комментарий dart, flutter

Пн	Вт	Ср	Чт	Пт	Сб	Вс
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31