douyin_demo/lib/widgets/bottom_bar.dart

import 'package:douyin_demo/pages/camera_main.dart';
import 'package:douyin_demo/pages/same_city_page.dart';
import 'package:douyin_demo/pages/home_page.dart';
import 'package:douyin_demo/providers/CameraProvider.dart';
import 'package:douyin_demo/providers/PostsGalleryProvider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class BtmBar extends StatefulWidget {
  BtmBar({Key? key, required this.selectIndex}) : super(key: key);
  final int selectIndex;

  _BtmBarState createState() => _BtmBarState();
}

class _BtmBarState extends State<BtmBar> {
  List<bool> selected = <bool>[];
  List<String> selectItems = <String>[];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 4; i++) {
      selected.add(false);
    }
    selected[widget.selectIndex] = true;
  }

  @override
  void dispose() {
    // _controller.dispose();
    super.dispose();
  }

  tapItem(index) {
    // selected=List<bool>();
    // for (var i = 0; i < 4; i++) {
    //   selected.add(false);
    // }
    // selected[index]=true;
    // setState(() {

    //   selected=selected;
    // });
    switch (index) {
      // case 0:
      //   Navigator.pushAndRemoveUntil(
      //       context,
      //       MaterialPageRoute(
      //           builder: (context) => MyHomePage(
      //                 selIndex: index,
      //               )),
      //       ModalRoute.withName("/Home"));
      //   break;
      case 1:
        Navigator.pushAndRemoveUntil(
            context,
            MaterialPageRoute(
                builder: (context) => MultiProvider(
                        providers: [
                          ChangeNotifierProvider(
                              create: (BuildContext context) {
                            return PostsGalleryProvider();
                          })
                        ],
                        child: SameCityMain(
                          selIndex: index,
                        ))),
            ModalRoute.withName("/sameCity"));
        break;
      case 2:
        Navigator.pushAndRemoveUntil(
            context,
            MaterialPageRoute(builder: (context) => HomePage()),
            ModalRoute.withName("/selfHome"));
        break;
      case 3:
        Navigator.of(context).push(MaterialPageRoute(
            builder: (BuildContext context) {
              return MultiProvider(
                  providers: [
                    ChangeNotifierProvider(create: (BuildContext context) {
                      return CameraProvider();
                    })
                  ],
                  child: CameraPage(
                      // rpx: MediaQuery.of(context).size.width / 750,
                      ));
            },
            fullscreenDialog: true));
        break;
      default:
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    // RecommendProvider provider = Provider.of<RecommendProvider>(context);
    double rpx = MediaQuery.of(context).size.width / 750;
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
              flex: 1,
              child: getBtmTextWidget("首页", selected[0], () {
                tapItem(0);
              }, rpx)),
          Expanded(
              flex: 1,
              child: getBtmTextWidget("同城", selected[1], () {
                tapItem(1);
              }, rpx)),
          Expanded(
              flex: 1,
              child: AddIcon(
                tapItem: () {
                  tapItem(3);
                },
              )),
          Expanded(
              flex: 1,
              child: getBtmTextWidget("消息", selected[2], () {
                tapItem(2);
              }, rpx)),
          Expanded(
              flex: 1,
              child: getBtmTextWidget("我", selected[3], () {
                tapItem(3);
              }, rpx)),
        ],
      ),
    );
  }
}

getBtmTextWidget(String content, bool ifSelected, tapFunc, double rpx) {
  return TextButton(
      onPressed: () {
        tapFunc();
      },
      child: Text("$content",
          style: ifSelected
              ? TextStyle(
                  fontSize: 30 * rpx,
                  color: Colors.white,
                  fontWeight: FontWeight.w900)
              : TextStyle(
                  fontSize: 30 * rpx,
                  color: Colors.grey[600],
                  fontWeight: FontWeight.w900)));
}

class AddIcon extends StatelessWidget {
  const AddIcon({Key? key, required this.tapItem}) : super(key: key);
  final VoidCallback tapItem;

  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;
    double iconHeight = 55 * rpx;
    double totalWidth = 90 * rpx;
    double eachSide = 5 * rpx;
    return Container(
      // decoration: BoxDecoration(),
      padding: EdgeInsets.symmetric(horizontal: 30 * rpx),
      height: iconHeight,
      width: 150 * rpx,
      child: TextButton(
          style:
              ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero)),
          onPressed: () {
            tapItem();
          },
          child: Stack(
            children: [
              Positioned(
                height: iconHeight,
                width: totalWidth - eachSide,
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.cyan,
                      borderRadius: BorderRadius.circular(10)),
                ),
              ),
              Positioned(
                height: iconHeight,
                width: totalWidth - eachSide,
                right: 0,
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.redAccent,
                      borderRadius: BorderRadius.circular(10)),
                ),
              ),
              Positioned(
                height: iconHeight,
                width: totalWidth - eachSide * 2,
                right: eachSide,
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                  child: Icon(Icons.add),
                ),
              ),
            ],
          )),
    );
  }
}