Как сделать настраиваемый FloatingActionButtonLocation для BottomNavigationBar во Flutter?

У меня есть design нижней панели навигации, как это с расположением FAB / Container параллельно с другими иконками:

Как видите, FAB / Container with icon Add посередине и параллельно другим значкам (Дом, Поиск, Профиль, Еще).

Я изо всех сил стараюсь создать обычай FloatingActionButtonLocation с помощью этого кода:

import 'dart:math' as math;
import 'package:flutter/material.dart';

abstract class CustomFloatingActionButtonLocation {

  const CustomFloatingActionButtonLocation();
  static const FloatingActionButtonLocation bottomDocked = _BottomDockedFloatingActionButtonLocation();

  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry);

  @override
  String toString() => '$runtimeType';
}

// Provider of common logic for [FloatingActionButtonLocation]s that
// dock to the [BottomAppBar].
abstract class _DockedFloatingActionButtonLocation extends FloatingActionButtonLocation {
  const _DockedFloatingActionButtonLocation();

  // Positions the Y coordinate of the [FloatingActionButton] at a height
  // where it docks to the [BottomAppBar].
  @protected
  double getDockedY(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double contentBottom = scaffoldGeometry.contentBottom;
    final double bottomSheetHeight = scaffoldGeometry.bottomSheetSize.height;
    final double fabHeight = scaffoldGeometry.floatingActionButtonSize.height;
    final double snackBarHeight = scaffoldGeometry.snackBarSize.height;

    double fabY = contentBottom - fabHeight / 2.0;
    // The FAB should sit with a margin between it and the snack bar.
    if (snackBarHeight > 0.0)
      fabY = math.min(fabY, contentBottom - snackBarHeight - fabHeight - kFloatingActionButtonMargin);
    // The FAB should sit with its center in front of the top of the bottom sheet.
    if (bottomSheetHeight > 0.0)
      fabY = math.min(fabY, contentBottom - bottomSheetHeight - fabHeight / 2.0);

    final double maxFabY = scaffoldGeometry.scaffoldSize.height - fabHeight;
    return math.min(maxFabY, fabY);
  }
}

class _BottomDockedFloatingActionButtonLocation extends _DockedFloatingActionButtonLocation {

  const _BottomDockedFloatingActionButtonLocation();

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final double fabX = (scaffoldGeometry.scaffoldSize.width - scaffoldGeometry.floatingActionButtonSize.width) / 2.0;
    return Offset(fabX, getDockedY(scaffoldGeometry));
  }

  @override
  String toString() => 'FloatingActionButtonLocation.bottomDocked';

}

И я реализовал этот обычай вот так:

Scaffold(
        bottomNavigationBar: FABBottomAppBar(
          color: Colors.grey,
          backgroundColor: Colors.white,
          selectedColor: Colors.red,
          notchedShape: CircularOuterNotchedRectangle(),
          onTabSelected: _onTapped,
          items: [
            FABBottomAppBarItem(iconData: Icons.home, text: 'หน้าแรก'),
            FABBottomAppBarItem(iconData: Icons.search, text: 'ค้นหา'),
            FABBottomAppBarItem(iconData: Icons.account_circle, text: 'โปรไฟล์'),
            FABBottomAppBarItem(iconData: Icons.more_horiz, text: 'อื่นๆ'),
          ],
        ),
        body: _list[_page],
        floatingActionButtonLocation: CustomFloatingActionButtonLocation.bottomDocked,
        floatingActionButton: Container(
          height: 50,
          width: 50,
          decoration: BoxDecoration(
            color: Colors.red,
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white),
          ),
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
      ),

Как видите, я называю CustomFloatingActionButtonLocation.bottomDocked в параметре floatingActionButtonLocation. И результат моего кода такой:

Как видите, мой код не дает FAB parallel на другие иконки (Дом, Поиск, Профиль, Еще) понравились в оформлении.

Как я могу изменить положение FAB вниз? Таким образом, FAB можно использовать параллельно с другими значками, как в дизайне. Пожалуйста помоги!!.

0 ответов

Другие вопросы по тегам