Мій перший Flutter додаток: Встановлення та створення

Це мій перший пост у цьому блозі, і я хотів би розпочати з того, як саме встановити Flutter на ваш комп'ютер.

Flutter – це UI фреймворк від Google, що дозволяє нам створювати красиві, високопродуктивні додатки для мобільних, веб і десктоп платформ з однією кодовою базою.

Встановлення Flutter для MacOS

Щоб розпочати, нам потрібно встановити Flutter на наш комп'ютер. Описуватиму процес для MacOS, але ви також можете знайти інструкції для Windows і Linux на офіційному сайті Flutter.

1. Скачайте Flutter SDK з офіційного сайту.

2. Розпакуйте завантажений файл у директорії на свій вибір. Можна використати команду tar xf ~/Downloads/flutter_macos_vX.X.X-stable.tar.xz у Terminal, замінивши "vX.X.X" на версію Flutter SDK, яку ви завантажили.

3. Додайте Flutter до змінної PATH у вашій системі. Виконайте в Terminal export PATH="PATH:`pwd`/flutter/bin" у папці, де ви розпакували Flutter.

4. Додайте цей експорт PATH до вашого профілю shell, щоб зберегти його між сеансами. Якщо ви використовуєте bash, додайте наступний рядок до файлу ~/.bash_profile або ~/.bashrc:
export PATH="PATH:[PATH_TO_FLUTTER_DIRECTORY]/flutter/bin"

5. Встановіть Xcode через Mac App Store, якщо ви цього ще не зробили.

6. Встановіть Android Studio та VS Code, якщо вони ще не встановлені.

7. Запустіть flutter doctor у Terminal, щоб перевірити, чи є все готове до роботи.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.12, on macOS 13.3.1 22E772610a darwin-x64, locale en-UA)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.78.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

На цьому етапі у вас встановлений та налаштований Flutter, і ви готові створити свій перший Flutter додаток!

Створення нашого першого Flutter додатку

Після успішного встановлення Flutter ми можемо почати створювати наш перший проект.

1. Відкрийте Terminal і перейдіть до каталогу, де ви хочете зберігати свої проекти Flutter.

2. Введіть flutter create my_first_app (ви можете замінити `my_first_app` на назву вашого проекту).

flutter create my_first_app 

3. Перейдіть до новоствореної папки і запустіть ваш перший додаток, виконавши:

cd my_first_app
flutter run

Після цього Flutter компілює ваш додаток і запускає його в налаштованому вами емуляторі або підключеному пристрої.

Вигляд нашого першого Flutter додатку

Відкрийте файл lib/main.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',

      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

  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;

  void _incrementCounter() {

    setState(() {

      _counter++;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(widget.title),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

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

      ),

    );

  }

}

Цей код створює простий додаток, в якому є кнопка, яка збільшує лічильник кожен раз, коли на неї натискають.

Завершення

У наступних постах я поглиблено розберу архітектуру Flutter додатків, їхні основні компоненти та як створювати власні віджети.

Ми лише на початку нашої подорожі, але вже зараз можна побачити, наскільки це потужний та гнучкий інструмент для розробки кросплатформних додатків.

Приєднуйтесь до мене у наступних статтях, щоб розкрити більше можливостей Flutter!