Как создать свое первое приложение для Linux с помощью Flutter

sudo apt update
sudo apt install snapd

sudo snap install core

sudo dnf install snapd

sudo ln -s /var/lib/snapd/snap /snap

sudo snap install flutter --classic

wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.
1. Установка Flutter на ваш компьютер
 текущий каталог.


tar xf ~/Downloads/flutter_linux_3.3.2-s
Установить Flutter с помощью Snap
влеченный каталог Flutter в свою домашнюю папку и установите двоичный путь Flutter в вашей среде bash.


cp flutter/ ~ 
export PATH="$PATH:`pwd`/flutter/bin"

Запустите команду flutter doctor -v, чтобы проверить, успешно ли установлен Flutter. Если вы хотите навсегда установить переменные среды Flutter и сделать команды Flutter доступными в вашей среде, установите переменную среды Flutter в файле «.rc».
Если вы используете оболочку bash, откройте файл «.bashrc» и вставьте в его конец следующую строку кода.

export PATH="$PATH:[PATH_OF_FLUTTER_DIRECTORY]/bin"

Примечание : измените [PATH_OF_FLUTTER_DIRECTORY]на свой собственный путь к каталогу Flutter.
Нажмите «Сохранить» и укажите источник файла «.bashrc» или используйте новое окно терминала, чтобы обновить переменные среды, присутствующие в файле «.bashrc».

source .bashrc

Наконец, еще раз запустите команду flutter doctor -v, чтобы проверить, все ли компоненты Flutter правильно установлены на вашем устройстве. Альтернативно, следуйте инструкциям терминала, чтобы установить все необходимые библиотеки Flutter.
Читайте также:  Почему вам следует использовать Timeshift для резервного копирования вашего компьютера 
Установить с помощью Git
Установка Flutter с использованием Git аналогична описанным выше процессам. Основное отличие заключается в том, что вместо загрузки определенной версии Flutter вы можете переключить версию Flutter, просто добавив аргумент Терминала.
Можно  установите Git с помощью менеджера пакетов .

sudo apt update
sudo apt install git

Клонируйте репозиторий GitHub в текущий рабочий каталог. Вам следует использовать домашний каталог, а не случайный.

cd ~
git clone https://github.com/flutter/flutter.git

Приведенная выше команда клонировала главную ветку репозитория GitHub. Если вы хотите переключить его на стабильную ветку, добавьте флаг -bк команде git clone.

git clone https://github.com/flutter/flutter.git -b stable

Добавьте путь Flutter в файл «.bashrc», чтобы завершить установку Flutter.

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

2. Создание проекта Flutter
Если вы только начали работать над проектом и еще н
Установить Flutter вручную
м решением будет создание проекта с новым именем пакета (уникальным идентификатором). Каждое приложение Flutter имеет имя пакета, которое уникально идентифицирует ваше приложение, и вы можете установить его с помощью команды flutter create.

Если у вас есть доменное имя «example.com», то имя вашего пакета должно быть «com.example projectname». Вы можете установить это имя пакета, используя флаг --orgв команде flutter create.

flutter create --org com.example counter

В текущем каталоге будет создан новый проект Flutter с именем проекта «counter», а именем пакета «com.example.counter».

Когда вы создаете приложение Flutter, файл «main.dart», найденный в папке «counter/lib» вашего проекта, будет заполнен демонстрационным приложением (его код можно изменить, как показано ниже), которое вы можете запустить. немедленно!
Читайте также:  4 способа увеличить время автономной работы вашего ноутбука с Linux 
3. Запуск вашего первого приложения Flutter
После создания проекта Flutter откройте каталог проекта в вашем любимом редакторе кода. Например, если вы используете Visual Studio Code, запустите code counterв терминале, чтобы открыть каталог вашего проекта («счетчик» в нашем случае) в VSCode.
Используйте команду CTRL+ `, чтобы открыть терминал внутри редактора, который вы будете использовать для запуска своего первого приложения Flutter, набрав:

flutter run -d linux


Если вы все сделали правильно, вы должны запустить приложение Linux на своем рабочем столе. Это простое приложение, позволяющее нажать «+» (Добавить), чтобы увеличить счетчик, расположенный в центре.

Читайте также:  Как перезагрузить зависший рабочий стол в Linux 
Основные понятия Flutter-приложений
Прежде чем приступить к редактированию частей этого демонстрационного кода, вам необходимо понять несколько концепций, уникальных для Flutter. Откройте файл «counter/lib/main.dart» в редакторе кода, чтобы увидеть несколько аспектов:

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


main() – это функция, представляющая отправную точку приложения.
MyApp() – это виджет Flutter. Думайте о виджетах как об основных строительных блоках Flutter. Они бывают двух видов: без сохранения состояния и с сохранением состояния.

1. Виджеты без сохранения состояния во Flutter
Виджеты без сохранения состояния — это базовые виджеты, которые содержат другие виджеты и не могут быть изменены после их создания. Как следует из названия, виджеты без сохранения состояния не имеют собственного состояния. MyApp() — это пример виджета без сохранения состояния. Он содержит виджет MaterialApp(), но не имеет никакой реактивности, поскольку это видно из самого кода:<
Установить с помощью Git
 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'),
    );
  }
}

2. Виджеты с отслеживанием состояния во Flutter
Напротив, виджеты с сохранением состояния можно изменять после их создания. В демонстрационном приложении вы видели изменение значения «счетчика», когда мы нажимали кнопку. Это достигается за счет использования виджетов с отслеживанием состояния, как показано в коде, где:

MyHomePage— это виджет с отслеживанием состояния.
Внутри класса _MyHomePageStateобратите внимание на переменную с именем _counter, которой изначально присвоено значение 0.
Нажатие кнопки в демо-версии приведет к запуску функции _incrementCounter()и увеличению значения на 1.
Функция setState()внутри _incrementCounter()повторно отображает виджет MyHomePage, и отображается обновленное значение _counter. на экране.


class MyHomePage extends StatefulWidget {
  const My
2. Создание проекта Flutter
Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  State<MyHomePage> 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>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        o
3. Запуск вашего первого приложения Flutter
n>
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Настройка вашего приложения
Внутри виджета MyApp вы можете, например, изменить строку заголовка с «Домашняя страница демо-версии Flutter» на «Сделать технологию проще»:

home: const MyHomePage(title: 'Make Tech Easier'),

Вы также можете изменить тему приложения, используя свойство primarySwatchвиджета MaterialApp. По умолчанию вы получаете синюю цветовую тему. Чтобы изменить этот цвет на зеленый, просто замените «Colors.blue» на «Colors.green»:

primarySwatch: Colors.green,

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

Это очень простое руководство, которое даст вам представление о том, как работает Flutter и как с его помощью можно начать разработку приложений для Linux. Если вам интересно и вы хотите узнать больше, следуйте этим  руководство по началу работы на веб-сайте Flutter.
Читайте также:  Основные понятия Flutter-приложенийrhnyuyu-panel-v-ubuntu/" title="Как скрыть верхнюю и боковую панель в Ubuntu">Как скрыть верхнюю и боковую панель в Ubuntu 
Часто задаваемые вопросы

Можете ли вы создавать веб-сайты с помощью Flutter?

Да. Flutter также поддерживает веб-разработку. Вы можете написать код и развернуть свое приложение на мобильных, настольных и веб-платформах. После создания веб-приложения вы можете отправить его на страницы Cloudflare или другие статические платформы размещения сайтов.



Можете ли вы запускать команды оболочки во Flutter?

Выполнение команд оболочки имеет решающее значение, если вы разрабатываете для Linux. Flutter предлагает эту функциональность «из коробки», используя dartIO. Если вы новичок в Linux,  освоить основы написания сценариев оболочки в Linux, прочтите наш
1. Виджеты без сохранения состояния во Flutter
tion>

Как я могу развернуть свои приложения Flutter Linux?

Официальный способ развертывания приложения Flutter Linux — использование пакетов Snap. Альтернативно вы можете  выпустить их в Snap Store . Но поскольку Flutter создает статически связанные двоичные файлы, вы можете упаковать их с помощью Appimage, Flatpak или собственных форматов упаковки, таких как «.deb» или «.rpm».


Изображение предоставлено Карлом Хейердалом через  Unsplash . Все скриншоты сделаны Хришикешем Патаком
2. Виджеты с отслеживанием состояния во Flutter
Настройка вашего приложения
Часто задаваемые вопросы
Можете ли вы создавать веб-сайты с помощью Flutter?
Можете ли вы запускать команды оболочки во Flutter?
Как я могу развернуть свои приложения Flutter Linux?