9 фев 2022 в 23:26

Flutter, заводи мотор! Основы для начинающих

Dart*Flutter*Разработка мобильных приложений*

Ожидает приглашения

Приветствую, друзья. В этом блоге я делюсь знаниями, которые освоил. В этом году у меня появилась цель обучить людей, которые только собрались создавать приложения на Flutter.

Главы:

Настройка и установка
Создание проекта
Заключение

Настройка и установка

Переходим на страницу установки Flutter и загружаем для своей платформы.

Затем качаем Android Studio и остальные необходимые компоненты.

Я буду использовать Visual Studio Code, поэтому настраиваем необходимые библиотеки для облегчения написания кода.

Библиотека Flutter для Visual Studio Code

Переходим во вкладку с библиотеками и в строке поиска вводим flutter, находим его в списке и скачиваем.

Окрашивание скобок - Bracket Pair Colorizer

Эта библиотека очень помогает при разработке приложений на Flutter/Dart, поэтому рекомендую тоже установить.

Задать тему для значков - Material Icon Theme

Устанавливать эту библиотеку не обязательно, но при разработке будет приятнее глазам.

Создание проекта

переходим на основную страницу и нажимаем сочетание клавиш Ctrl+Shift+P и вводим:

Flutter: New Project

Выбираем Application и далее папку, где будет находится этот проект. Называем проект только строчными буквами. Несколько слов разделяем нижним подчеркиванием. Нажимаем клавишу Enter и ждем.

Создается такой код:

import 'package:flutter/material.dart';

// main() является главной функцией
// с нее начинается выполнение приложения
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // build отвечает за постройку класса
  @override
  Widget build(BuildContext context) {
    // MaterialApp - главный виджет приложения
    // можно заменить на CupertinoApp, если хотите, чтобы у всех элементов был стиль IOS
    return MaterialApp(
      // заголовок
      title: 'Flutter Demo',
      // theme задает цвета, шрифт и др, в следующих частях мы это изучим
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // здесь задается главная страница для приложения
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
// функция, которая добавляет к числу _counter + 1, при вызове
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // это виджет для страницы и разных элементов
    return Scaffold(
      // сверху добавляется панель с текстом:
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // С помощью виджета Center все элементы будут находится по центру
      body: Center(
        // Column будет вмещать в себя элементы, которые будут распологаться по вертикали
        child: Column(
          // это задает как элементы будут располагаться
          mainAxisAlignment: MainAxisAlignment.center,
          // в children вкладываются элементы
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      // добавляется кнопка, которая будет находится слева внизу, но мы сможем изменить позицию, если это нам требуется
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Приложение будет состоять из классов, которые мы создадим, но у них будут разное расширение StatefulWidget или StatelessWidget.

Если нам понадобится менять строение элементов, данные приложения и т.п., то нам нужно использовать StatefulWidget, в остальных случаях StatelessWidget.

Заключение

В данном уроке мы установили Flutter, Visual Studio Code, Android Studio и нужные библиотеки.

В следующем уроке мы начнем изучать основы языка Dart. Когда мы изучим его, то приступим к изучению Flutter и созданию приложений.

Надеюсь я понятно объяснил. Жду Ваших комментариев и вопросов.

До встречи!

Хабы: