lift-app/lib/widgets/app_search_bar.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:liftmanager/res/colors.dart';
import 'package:liftmanager/res/dimens.dart';
import 'package:liftmanager/res/gaps.dart';
import 'package:liftmanager/res/iconfont.dart';
import 'package:liftmanager/widgets/search_app_bar.dart' as search;

/// 自定义AppBar
class SearchAppBar extends StatelessWidget implements PreferredSizeWidget {
  const SearchAppBar(
      {Key key,
      this.backgroundColor,
      this.title: "",
      this.centerTitle: "",
      this.actions,
      this.searchWidth,
      this.onPressed,
      this.isBack: true})
      : super(key: key);

  final Color backgroundColor;
  final String title;
  final double searchWidth;
  final String centerTitle;
  final List<Widget> actions;
  final VoidCallback onPressed;
  final bool isBack;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Container(
        decoration: BoxDecoration(
          color: backgroundColor,
        ),
        child: SafeArea(
          child: Stack(
            alignment: Alignment.centerLeft,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    alignment: centerTitle.isEmpty
                        ? Alignment.centerLeft
                        : Alignment.center,
                    width: double.infinity,
                    child: Text(title.isEmpty ? centerTitle : title,
                        style: TextStyle(
                          fontSize: Dimens.font_sp18,
                          color: Colours.dark_text,
                        )),
                    padding: const EdgeInsets.symmetric(horizontal: 48.0),
                  )
                ],
              ),
              isBack
                  ? IconButton(
                      onPressed: () {
                        FocusScope.of(context).unfocus();
                        Navigator.maybePop(context);
                      },
                      tooltip: 'Back',
                      padding: const EdgeInsets.all(12.0),
                      icon: Icon(
                        Iconfont.fanhui,
                        size: 17,
                      ),
                    )
                  : Gaps.empty,
              GestureDetector(
                  onTap: () {
                    // NavigatorUtils.push(context, SearchRouter.searchPage);
                    // 搜索跳转改为到回调里面触发
                    onPressed();
                  },
                  child: Container(
                    height: 35,
                    width: searchWidth == null ? 400 : searchWidth,
                    margin: const EdgeInsets.only(left: 45.0, right: 15),
                    decoration: BoxDecoration(
                        color: Color(0xFFF5F8FA),
                        borderRadius: BorderRadius.circular(17.5)),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(
                          width: 10,
                        ),
                        Icon(
                          Iconfont.sousuo,
                          size: 16,
                          color: Color(0xff6A6A76),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          "搜索你需要的关键词",
                          style: TextStyle(color: Colours.text_gray_c),
                        )
                      ],
                    ),
                  )),
              Positioned(
                right: 0.0,
                child: Theme(
                    data: Theme.of(context).copyWith(
                        buttonTheme: ButtonThemeData(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      minWidth: 60.0,
                    )),
                    child: rightActions()),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget rightActions() {
    if (this.actions != null && this.actions.isNotEmpty) {
      return Row(
        children: this.actions,
      );
    } else {
      return Container();
    }
  }

  @override
  Size get preferredSize => Size.fromHeight(48.0);
}

class SearchAppBar2 extends StatefulWidget implements PreferredSizeWidget {
  SearchAppBar2({
    Key key,
    this.backgroundColor,
    this.title: "",
    this.isBtn: false,
    this.centerTitle: "",
    this.actions,
    this.searchWidth,
    this.onPressed,
    this.isBack: true,
    this.hintText: "搜索您需要的关键词",
  }) : super(key: key);

  final Color backgroundColor;
  final String title;
  final double searchWidth;
  final String centerTitle;
  final List<Widget> actions;
  final Function(String) onPressed;
  final bool isBack;
  final String hintText;
  final bool isBtn;

  @override
  _SearchAppBar2State createState() => _SearchAppBar2State();

  @override
  Size get preferredSize => Size.fromHeight(48.0);
}

class _SearchAppBar2State extends State<SearchAppBar2> {
  int searchBarType = 1;
  String searchText = '';

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Container(
        // decoration: Decoration(,
        // color:widget.backgroundColor,
        child: searchBarType == 1
            ? SearchAppBar(
                backgroundColor: widget.backgroundColor,
                actions: widget.actions,
                searchWidth: widget.searchWidth,
                isBack: widget.isBack,
                onPressed: () {
                  setState(() {
                    searchBarType = 2;
                  });
                },
              )
            : search.SearchAppBar(
                hintText: widget.hintText,
                searchText: searchText,
                onPressed: (text) {
                  searchText = text;
                  setState(() {});
                  widget.onPressed(text);
                },
              ),
      ),
    );
  }
}