Flutter 基础学习之底部不规则Tabbar

最新推荐文章于 2022-08-27 00:21:01 发布

原创

最新推荐文章于 2022-08-27 00:21:01 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Flutter中实现一个独特的界面设计，通过将FloatingActionButton与TabbarItem结合，使按钮固定在底部并融合到导航栏后。通过实例代码展示了如何设置FloatingActionButton的位置和底部导航栏的交互元素。

每天坚持学习记录分享加油加油加油！！！！

关键点在于创建不规则按钮，按钮和通用的TabbarItem融合

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,浮层按钮和Tabbar后面融合起来

import 'package:flutter/material.dart';

class BottomAppBarDemo extends StatefulWidget {
  @override
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){

        },
        tooltip: 'oliver',
        child: Icon(
          Icons.add,
          color:Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle