App_Flutter/lib/view/component/navi_bar.dart

import 'dart:ui';

import 'package:fast/extension/layout.dart';
import 'package:fast/utils/size_fit.dart';
import 'package:flutter/material.dart';

// ignore: must_be_immutable
class NaviBar extends StatelessWidget {
  String title = '';
  bool showInfo = false;
  bool showCalendarBar = false;
  VoidCallback closeCallback;
  NaviBar(
      {Key? key,
      required this.title,
      required this.closeCallback,
      bool? showInfo,
      bool? showBar})
      : super(key: key) {
    if (showInfo != null) {
      this.showInfo = showInfo;
    }
    if (showBar!=null){
      showCalendarBar = showBar;
    }
  }

  @override
  Widget build(BuildContext context) {
    EdgeInsets safePadding = MediaQuery.of(context).padding;
    double barHeight = 0.px;
    if (showCalendarBar==true){
      barHeight = 60.px;
    }
    return Stack(
      children: [
        ClipRect(
          child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: Container(
                width: 375.px,
                height: 40.px+safePadding.top + barHeight,
                color: const Color(0xCC000D1F),
              )),
        ),
        Positioned(
          top: safePadding.top,
          child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () => closeCallback(),
              child: Image(
                image: AssetImage(showInfo
                    ? 'assets/images/close.png'
                    : 'assets/images/navi_back.png'),
                width: 20.px,
                height: 20.px,
              )
                  .padding(left: 12.px, right: 12.px)
                  .margin(left: 8.px, right: 20.px),
            ),
            Text(
              title,
              style: TextStyle(color: Colors.white, fontSize: 16.px),
            ),
            // if (showInfo)
            //   GestureDetector(
            //     child: Image(
            //       image: const AssetImage('assets/images/info.png'),
            //       width: 12.px,
            //       height: 12.px,
            //     ).paddingAll(6.px),
            //   )
          ],
        ).height(40.px)),
        if (showCalendarBar==true)
        Positioned(
          left: 0,
          bottom: 6.px,
          child: 
          Image.asset('assets/images/calendar_detail_top.png',width: 375.px,height: 48.px,)
        )
        
      ],
    );
    
  }
}