Как сделать пользовательский FloatingActionButtonLocation для BottomNavigationBar во флаттере? - PullRequest
Новая
       57

Как сделать пользовательский FloatingActionButtonLocation для BottomNavigationBar во флаттере?

1 голос
/ 03 февраля 2020

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

enter image description here

Как вы можно видеть FAB / Container with icon Add в середине и параллельно другим значкам (Home, Search, Profile, More).

Я стараюсь изо всех сил создать пользовательский объект 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. И результат моего кода такой:

enter image description here

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

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

...