Многие люди хотят использовать флаттер для создания идеального приложения для устройств Android и iOS. Flutter поставляется с различными формами кнопок, которые полезны для разных случаев использования. Плавающая кнопка действия — самая важная вещь во флаттере. Наймите разработчиков Flutter из Bosc Tech, эффективно выполняющих эти важные задачи во Flutter, которые хорошо разбираются в индустрии флаттера.

Во-первых, вам нужно больше узнать о действии плавающей кнопки. Он действует как круглая кнопка со значком, которая плавает над содержимым.

  • Это лучший способ поддержать основное действие в приложении.
  • Разработчики приложений часто используют плавающую кнопку действия в поле Scaffold.floatingActionButton.
  • Плавающие кнопки действий эффективны для положительных действий, включая обмен, создание или навигацию.
  • Если вы хотите использовать кнопку с плавающим действием, вы должны убедиться, что каждая кнопка имеет уникальный тег heroTag.
  • Это идеальный виджет, который плавает поверх других виджетов.
  • Вы можете использовать это в приложении для плавающих эффектов.

Метод понимания

Прежде чем реализовать две плавающие кнопки действий, вы должны понять различные методы и то, как они работают. Эксперты помогут вам следовать простому методу плавающих кнопок в флаттере.

Атрибут Floatingactionbutton в виджете скаффолда обеспечивает доступ к плавающей кнопке действия, виджету строки и столбца. Вы можете сосредоточиться на примере кода для виджета каркаса, чтобы создать две плавающие кнопки действий. Также проверьте другое использование виджета каркаса при использовании шестнадцатеричной строки цвета во Flutter.

возврат Леска(

панель приложения: панель приложения (

заголовок: Текст (""),

),

тело: SingleChildScrollView(/…/),

floatActionButton: столбец (

mainAxisAlignment: MainAxisAlignment.end,

дети: [

Плавающая кнопка действия (

ребенок: Значок(

Иконки.удалить

),

onPressed: () {

//…

},

heroTag: null,

),

Коробка Размера(

высота: 10,

),

Плавающая кнопка действия (

ребенок: Значок(

Иконы.звезда

),

onPressed: () => _someFunc(),

heroTag: null,

)

]

)

);

Виджет скаффолда имеет параметр, например кнопку с плавающим действием, которая использует виджет с плавающим действием и другие. Вы можете использовать элегантный и аккуратный виджет FloatingActionButton, если вам нужна одна плавающая кнопка.

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

импортировать ‘package:flutter/material.dart’;

void main() {

runApp(const MyApp());

}

класс MyApp расширяет StatelessWidget {

const MyApp({Ключ? Ключ}): super(Ключ: Ключ);

@переопределить

Сборка виджета (контекст BuildContext) {

возврат MaterialApp(

debugShowCheckedModeBanner: false,

заголовок: «Пример»,

тема: ThemeData(

colorScheme: ColorScheme.fromSwatch (основной образец: Colors.blue)

.copyWith(вторичный: Colors.blueAccent)),

дом: const HomePage(),

);

}

}

класс Домашняя страница расширяет StatefulWidget {

const HomePage({Key? key}): super(key: key);

@переопределить

_HomePageState createState() => _HomePageState();

}

класс _HomePageState расширяет состояние {

@переопределить

Сборка виджета (контекст BuildContext) {

возврат Леска(

панель приложения: панель приложения (

title: const Text('Пример'),

),

тело: константный центр(),

floatActionButtonLocation: FloatingActionButtonLocation.centerFloat,

плавающая кнопка действия: стек (

подходит: StackFit.expand,

дети: [

Позиционировано(

слева: 30,

внизу: 20,

дочерний элемент: плавающая кнопка действия (

heroTag: «назад»,

onPressed: () {/* Сделайте что-нибудь */},

дочерний элемент: значок константы (

Иконки.arrow_left,

размер: 40,

),

форма: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(10),

),

),

),

Позиционировано(

внизу: 20,

справа: 30,

дочерний элемент: плавающая кнопка действия (

heroTag: «следующий»,

onPressed: () {},

дочерний элемент: значок константы (

Иконки.arrow_right,

размер: 40,

),

форма: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(10),

),

),

),

// Добавьте больше плавающих кнопок, если хотите

],

),

);

}

}

Выход

Включить плагин

Во флаттере доступны различные формы плагинов для создания двух плавающих кнопок действий. Использование плагина — еще один способ создания плавающего действия. Flutter_speed_dial — самый важный плагин для плавающего действия.

Быстрый набор — отличный плагин для создания действий разных сущностей на одном экране. Он имеет разные свойства для изменения пространства. Вы должны изучить такие свойства, как интервал, дочерний край, интервал между детьми и дочерний отступ.

Быстрый набор — это идеальный плагин с плавающей кнопкой действия, который генерирует стек действий от плавающей кнопки после нажатия на тот же экран. Действия можно выполнять в плавающей кнопке действия со значками и метками. Быстрый набор может быть достигнут с помощью плагина или зависимости, такой как flutter_speed_dial. Необходимо понимать процедуру добавления плагина в приложение флаттера.

  • Прежде всего, откройте файл pubspec.YAML из проекта.
  • После этого вы можете добавить flutter_speed_dial: в зависимости в файле pubspec.YAML.

зависимости:
flutter:
SDK: flutter
flutter_speed_dial:

  • Вы можете нажать кнопку pub get в верхней части приложения.
  • Процесс завершен с кодом выхода 0, в консоли отображается, что зависимость успешно добавлена.
  • Вы можете импортировать плагины или пакеты, добавив пакет импорта:flutter_speed_dial/flutter_speed_dial.dart в файл main.dart.

основной дротик

импортировать ‘package:flutter/material.dart’;

импортировать ‘package:flutter_speed_dial/flutter_speed_dial.dart’;

void main() {

runApp(const MyApp());

}

класс MyApp расширяет StatelessWidget {

const MyApp({Ключ? Ключ}): super(Ключ: Ключ);

@переопределить

Сборка виджета (контекст BuildContext) {

возврат const MaterialApp(

debugShowCheckedModeBanner: false,

заголовок: «Пример»,

дом: домашняя страница(),

);

}

}

класс Домашняя страница расширяет StatefulWidget {

const HomePage({Key? key}): super(key: key);

@переопределить

_HomePageState createState() => _HomePageState();

}

класс _HomePageState расширяет состояние {

@переопределить

Сборка виджета (контекст BuildContext) {

возврат Леска(

панель приложения: панель приложения (

title: const Text('Пример'),

),

тело: константный центр(),

плавающийActionButton: SpeedDial(

значок: Icons.star,

backgroundColor: Colors.blue,

дети: [

Быстрый набор дочернего(

дочерний элемент: const Icon (Icons.arrow_circle_down_rounded, цвет: Colors.white),

метка: «Скачать»,

backgroundColor: Colors.blueAccent,

onTap: () {},

),

Быстрый набор дочернего(

дочерний элемент: const Icon (Icons.email, цвет: Colors.white),

метка: «Электронная почта»,

backgroundColor: Colors.blueAccent,

onTap: () {},

),

Быстрый набор дочернего(

дочерний элемент: const Icon (Icons.chat, цвет: Colors.white),

метка: «Сообщение»,

backgroundColor: Colors.blueAccent,

onTap: () {},

),

]),

);

}

}

Выход

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

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

Заключение

Все вышеперечисленное поможет вам лучше понять, как сделать две плавающие кнопки действий в приложении. Таким образом, вы можете нанять разработчика флаттера и получить полную поддержку, чтобы сделать плавающее действие и сделать приложение более функциональным и красивым.