Início / coding / Perguntas / 79319944
Accepted
Mervin Hemaraju
Asked: 2024-12-31 20:15:51 +0800 CST

Flutter: Adicionar barra de pesquisa do material 3 com navegação de gaveta

  • 772

Sou relativamente novo no Flutter e estou tentando adicionar a nova barra de pesquisa do Material 3 ao meu aplicativo junto com uma navegação de gaveta, mas não está funcionando como esperado.

É assim que está aparecendo:

insira a descrição da imagem aqui

O ícone de navegação deveria estar dentro da barra de pesquisa.

Abaixo está meu código:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        clipBehavior: Clip.none,
        title: SearchBar(),
      ),
      drawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                // Update the state of the app.
                // ...
              },
            ),
          ],
        ),
      ),
      body: CustomScrollView(
        scrollDirection: Axis.vertical,
        slivers: [
          // MesAppBar(),
          HomeScreen(),
        ],
      ),
    );
  }
}
flutter

1 respostas

  1. Best Answer

    Primeiro, você precisa remover o ícone de hambúrguer do AppBar. Você pode fazer isso configurando automaticallyImplyLeading como false, depois disso, você pode colocar o IconButton desejado dentro do widget SearchBar configurando a propriedade leading. Para gerenciar a funcionalidade de abrir/fechar a gaveta, você pode atribuir uma GlobalKey ao Scaffold e fazer algo como:_scaffoldKey.currentState?.openDrawer() or closeDrawer().

    Aqui está o código de trabalho:

    @override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldkey, // GlobalKey
    appBar: AppBar(
      clipBehavior: Clip.none,
      automaticallyImplyLeading: false,
      title: SearchBar(
        leading: IconButton(
            onPressed: () {
              _scaffoldkey.currentState?.openDrawer();
            },
            icon: const Icon(Icons.menu)),
      ),
    ),
    drawer: Drawer(
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text('Drawer Header'),
          ),
          ListTile(
            title: const Text('Item 1'),
            onTap: () {
              // Update the state of the app.
              // ...
            },
          ),
          ListTile(
            title: const Text('Item 2'),
            onTap: () {
              // Update the state of the app.
              // ...
            },
          ),
        ],
      ),
    ),
    body: CustomScrollView(
      scrollDirection: Axis.vertical,
      slivers: [
        // MesAppBar(),
        HomeScreen(),
      ],
    ),
  );
}
    • 1

relate perguntas