Flutter - 如何制作弯曲类型的自定义底部导航栏

Question

enter image description here

我想做这种底部导航栏，谁能帮忙？

Answer 1

您可以使用 FloatingActionButton 的 floatingActionButtonLocation 属性停靠 Scaffold。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: const Center(child: const Text('asdfasdfasdf')),
        floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
        floatingActionButton: Container(
          margin: const EdgeInsets.only(right: 55),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 5),
          ),
          child: FloatingActionButton(
            onPressed: () {},
            elevation: 0,
            backgroundColor: Colors.red,
            child: const Icon(Icons.star_purple500_sharp),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          onTap: (int i) {},
          backgroundColor: Colors.red,
          currentIndex: 0,
          type: BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.headset_mic_rounded),
              label: '',
            ),
          ],
        ),
      ),
    );
  }
}