Поиск Flutter не может переопределить определенные стили темы

Question

Я пытаюсь настроить внешний вид поиска с помощью настраиваемого SearchDelegate, но похоже, что переопределениеappBarThemeобновляет только определенные стили темы. Я могу изменить цвет панели приложения и стиль текста, но, похоже, я игнорирую другие настройки, такие как высота и оформление.

Как настроить оформление ввода поискового делегата и высоту панели приложения?

Я что-то пропустил? Это предполагаемое поведение?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      home: Scaffold(
        appBar: AppBar(
          actions: [
            Builder(
              builder: (context) => IconButton(
                icon: Icon(Icons.search),
                onPressed: () => showSearch(context: context, delegate: CustomSearchDelegate()),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) => [
        if (query.isNotEmpty)
          IconButton(
            icon: Icon(Icons.close),
            onPressed: () {
              query = "";
              showSuggestions(context);
            },
          )
      ];

  @override
  Widget buildLeading(BuildContext context) => IconButton(
        tooltip: 'Back',
        icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
        onPressed: () => close(context, null),
      );

  @override
  Widget buildSuggestions(BuildContext context) => Text("Suggestions go here");

  @override
  Widget buildResults(BuildContext context) => Text("Results go here");

  @override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return theme.copyWith(
      primaryColor: Colors.white,
      primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.green),
      primaryColorBrightness: Brightness.dark,
      textTheme: theme.textTheme.copyWith(
        title: TextStyle(fontWeight: FontWeight.normal),
      ),
      // these ↓ do not work ☹️
      appBarTheme: theme.appBarTheme.copyWith(color: Colors.black12, elevation: 0),
      inputDecorationTheme: theme.inputDecorationTheme.copyWith(border: UnderlineInputBorder()),
    );
  }
}

Answer 1

Мне удалось добиться нулевой отметки, добавив appBarTheme: AppBarTheme(elevation: 0.0, color: Colors.black12). Мне не удалось заставить оформление ввода работать таким же образом, я добавил строку в корень кода темы приложения, но, похоже, это не сработало.

Код Код корневой темы выглядит следующим образом:

  class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          backgroundColor: Colors.white,
          appBarTheme: AppBarTheme(elevation: 0.0, color: Colors.black12),//elevation did work
          inputDecorationTheme:
              InputDecorationTheme(border: UnderlineInputBorder()),//this did not imply
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

а тема внутри SearchDelegate выглядит следующим образом:

@override
  ThemeData appBarTheme(BuildContext context) {
    assert(context != null);
    final ThemeData theme = Theme.of(context);
    assert(theme != null);
    return theme.copyWith(
      primaryColor: Colors.white,
      primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.green),
      primaryColorBrightness: Brightness.dark,
      textTheme: theme.textTheme.copyWith(
        title: TextStyle(fontWeight: FontWeight.normal),
      ),
    );
  }

Надеюсь это поможет!

Answer 2

это сработало для меня.

введите описание изображения здесь

      @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: transitionAnimation),
        onPressed: () {
          if (query.isEmpty) {
            close(context, null);
          } else {
            query = "";
            // showSuggestions(context);
          }
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
      onPressed: () => close(context, null),
    );
  }

  @override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(this.context);
    return theme.copyWith(
      accentColor: Colors.red,
      textTheme: theme.textTheme.copyWith(
        headline6: theme.textTheme.subtitle1.copyWith(color: Colors.black),
      ),
      inputDecorationTheme: theme.inputDecorationTheme.copyWith(
        hintStyle: theme.textTheme.subtitle1.copyWith(color: Colors.grey),
        fillColor: Colors.grey[200],
        filled: true,
        isDense: true,
        contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5),
          borderSide: BorderSide(color: Colors.grey, width: 0),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5),
          borderSide: BorderSide(color: Colors.grey, width: 0),
        ),
      ),
      appBarTheme: theme.appBarTheme.copyWith(
        titleSpacing: 0,
      ),
    );
  }

Answer 3

Измененный ответ адхитьи Шетти. Это для тех, кто хочет менять цвет подсказки вместе с цветом курсора.

      Color primaryColor = Color(0xff673BB7);  // My Custom Color 

 @override
   ThemeData appBarTheme(BuildContext context) {
     assert(context != null);
     final ThemeData theme = Theme.of(context);
     assert(theme != null);
     return theme.copyWith(
       appBarTheme: theme.appBarTheme.copyWith(backgroundColor: primaryColor),  // appbar background color 
       primaryColor: primaryColor,
       textSelectionTheme: TextSelectionThemeData(
         cursorColor: Colors.white ),  // cursor color
       hintColor: Colors.white,       //hint text color 
       primaryIconTheme: theme.primaryIconTheme.copyWith(color: Colors.white), //icons color
       primaryColorBrightness: Brightness.dark,
       textTheme: theme.textTheme.copyWith(
         headline6: TextStyle(fontWeight: FontWeight.normal,color: Colors.white),  // query Color 
       ),
     );
   }

Answer 4

Я нашел решение!!!

1. Удалить виджет строительства

  Widget buildLeading(BuildContext context) { 
// TODO: implement buildLeading 
       return Container( 
      height: 0,  
        );  
      } 

2. Вам нужно переопределить buildActions, чтобы поместить пользовательский ввод

  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    return [
      Expanded(flex: 1),
      Expanded(flex: 7),
      Expanded(flex: 2),
    ];
  }

1. Первый развернутый виджет - это "кнопка возврата"
2. Второй расширенный виджет - "TextFormField", тогда вы можете переопределить оформление: InputDecoration....
3. Третий расширенный виджет очищает ввод текстового поля