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

Введение

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

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

Требования:

1. Установите Flutter SDK с официального сайта Flutter ( https://flutter.dev/ ).
2. Установите Dart SDK (он поставляется с Flutter SDK, если вы установили Flutter).
3. Установите редактор кода. Популярными вариантами являются Visual Studio Code и Android Studio.
4. Установите плагины 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. Вы также можете изучить методы управления состоянием, анимацию и многое другое по мере продвижения. Удачного кодирования!