Создание мобильного приложения с помощью Flutter

Введение

Flutter — это платформа мобильного пользовательского интерфейса с открытым исходным кодом, созданная Google, которая позволяет разработчикам писать единую базу кода и компилировать ее в собственный код ARM как для Android, так и для iOS. Он набирает популярность благодаря красивому пользовательскому интерфейсу, отличной производительности и способности создавать приложения для нескольких платформ с единой кодовой базой.

Вот базовое руководство по созданию нового проекта Flutter и настройке вашего первого приложения.

Требования:

Установите Flutter SDK с официального сайта Flutter ( https://flutter.dev/ ).
Установите Dart SDK (он поставляется с Flutter SDK, если вы установили Flutter).
Установите редактор кода. Популярными вариантами являются Visual Studio Code и Android Studio.
Установите плагины Flutter и Dart в свой редактор, если они доступны.

Шаг 1: Создайте новый проект Flutter

Откройте терминал и введите следующую команду, чтобы создать новый проект Flutter.

flutter create my_app

Замените «my_app» предпочитаемым именем приложения. Эта команда создает новый каталог с именем «my_app» со всеми необходимыми файлами и каталогами.

Шаг 2. Перейдите в каталог вашего проекта

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

cd my_app

Шаг 3: Запустите приложение Flutter

Теперь выполните следующую команду, чтобы запустить ваше приложение:

flutter run

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

Шаг 4: Откройте основной файл дротика

Откройте проект Flutter в предпочитаемом вами редакторе и перейдите к файлу lib/main.dart. Это основной файл, в котором вы будете писать весь код Dart для своего приложения Flutter.

Шаг 5: Очистите приложение Flutter по умолчанию

В lib/main.dart вы увидите много кода, который создает приложение-счетчик. Для простоты удалите весь код в main.dart и замените его следующим:

import 'package:flutter/material.dart';

 void main() {
 runApp(MyApp());
 }

 class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 appBar: AppBar(
 title: Text('My First Flutter App'),
 ),
 body: Center(
 child: Text('Hello World!'),
 ),
 ),
 );
 }
 }

Шаг 6: Понимание кода

void main() => runApp(MyApp()); Это основная функция приложения, которая вызывает функцию runApp() с MyApp в качестве аргумента.
MyApp — это настраиваемый класс, расширяющий класс StatelessWidget. StatelessWidget — это класс Flutter, описывающий часть пользовательского интерфейса, которая не может меняться со временем.
Widget build(BuildContext context) Этот переопределенный метод возвращает новый виджет, который описывает, как этот виджет преобразует набор дочерних виджетов, которые следуют за ним в дереве.
MaterialApp — это предопределенный класс во Flutter, который включает в себя ряд компонентов, таких как AppBar, IconButton и т. д., которые обеспечивают основу Material Design.
Scaffold предоставляет структуру, которая реализована в соответствии с рекомендациями по дизайну материалов. Это похоже на ящик, куда вы помещаете AppBar, BottomNavigationBar, FloatingActionButton и многие другие виджеты Material Design.
Виджет AppBar автоматически создает AppBar в стиле Material Design.
Center виджет выравнивает дочерний виджет по центру доступного пространства на экране.
Text виджет — самый простой способ вывести текст на экран.

Шаг 7: снова запустите приложение

Сохраните изменения и снова запустите приложение, набрав в терминале команду flutter run. Вы должны увидеть приложение с заголовком и текстом «Hello World!».

Заключение

Это очень простое руководство для начала вашего путешествия во Flutter. Когда вы освоитесь с этими шагами, вы сможете изучить более сложные виджеты и API, предоставляемые Flutter и Dart. Вы также можете изучить методы управления состоянием, анимацию и многое другое по мере продвижения. Удачного кодирования!