如何从 Flutter 的搜索代理中删除飞溅

Posted 2023-02-23

【中文标题】如何从 Flutter 的搜索代理中删除飞溅

【英文标题】：How to Remove Splash From Flutter's Search Delegate

【发布时间】：2021-01-02 21:03:57

【问题描述】：

我正在制作我想在 App Store 上发布的第一个应用程序。这是一个天气应用程序。将其命名为 Aer，因此请尽快查看！但无论如何，我基本上已经完成了。不过有一件事困扰着我。每当我搜索一个城市（每当我在 SearchDelegate 中返回一个小部件或进出它时）都会发生这种奇怪的飞溅。我的猜测是它与动画有关，但我不知道如何更改它，或者是否是这样。下面是我的代码（小心复制粘贴，因为我做得很快）。我真的很想得到一些帮助来摆脱这个。我还附上了一个 gif，以更好地展示我在说什么。谢谢！

place_search.dart

import 'package:aer/services/places.dart';
import 'package:aer/style.dart';
import 'package:flutter/material.dart';

class AddressSearch extends SearchDelegate<Suggestion> 
  AddressSearch(this.sessionToken) 
    apiClient = PlaceApiProvider(sessionToken);
  

  final sessionToken;
  PlaceApiProvider apiClient;
  Suggestion firstItem;
  List<Suggestion> results;

  @override
  ThemeData appBarTheme(BuildContext context) 
    return ThemeData(
      primaryColor: Color.fromRGBO(45, 45, 42, 1.0),
      primaryIconTheme: IconThemeData(color: Color.fromRGBO(239, 247, 255, 1.0)),
      textTheme: TextTheme(
          title: Style.textStyle(size: 24, color: Color.fromRGBO(239, 247, 255, 1.0))
      ),
      inputDecorationTheme: InputDecorationTheme(
        hintStyle: Style.textStyle(size: 24, color: Color.fromRGBO(239, 247, 255, 1.0)),
      ),
      cursorColor: Color.fromRGBO(239, 247, 255, 1.0),
    );
  

  @override
  Animation<double> get transitionAnimation => super.transitionAnimation;

  @override
  TextInputType get keyboardType => TextInputType.name;

  @override
  List<Widget> buildActions(BuildContext context) 
    return [
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: IconButton(
          tooltip: 'Clear',
          icon: Icon(Icons.clear),
          onPressed: () 
            query = '';
          ,
        ),
      )
    ];
  

  @override
  Widget buildLeading(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: IconButton(
        tooltip: 'Back',
        icon: Icon(Icons.arrow_back),
        onPressed: () 
          close(context, null);
        ,
      ),
    );
  

  @override
  Widget buildResults(BuildContext context) 
    if (query != '' && firstItem != null) 
      return Scaffold(
        backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
        body: ListView.builder(
          itemBuilder: (context, index) => ListTile(
            title:
            Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Text((results[index]).description, style: Style.textStyle(size: 16, color: Color.fromRGBO(239, 247, 255, 1.0))),
            ),
            onTap: () 
              close(context, results[index]);
            ,
          ),
          itemCount: results.length,
        ),
      );
     else 
      query = '';
      return Scaffold(
        backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 128.0),
              child: Center(child: Text("Oops! We couldn't find that one.\nTry again.", textAlign: TextAlign.center, style: Style.textStyle(size: 20, color: Color.fromRGBO(239, 247, 255, 1.0)))),
            )
          ],
        ),
      );
    
  

  @override
  Widget buildSuggestions(BuildContext context) 
    return Scaffold(
      backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
      body: FutureBuilder(
        future: query == ''
            ? null
            : apiClient.fetchSuggestions(
            query, Localizations.localeOf(context).languageCode),
        builder: (context, snapshot) 
          if (snapshot.hasData) 
            if (snapshot.data.length != 0) 
              firstItem = snapshot.data[0] as Suggestion;
              results = snapshot.data;
             else 
              firstItem = null;
              return Scaffold(
                backgroundColor: Color.fromRGBO(45, 45, 42, 1.0),
                body: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(bottom: 128.0),
                      child: Center(child: Text("Oops! We couldn't find that one.\nTry again.", textAlign: TextAlign.center, style: Style.textStyle(size: 20, color: Color.fromRGBO(239, 247, 255, 1.0)))),
                    )
                  ],
                ),
              );
            
          
          return query == ''
            ? Container(
        )
            : snapshot.hasData
            ? ListView.builder(
          itemBuilder: (context, index) => ListTile(
            title:
            Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Text((snapshot.data[index] as Suggestion).description, style: Style.textStyle(size: 16, color: Color.fromRGBO(239, 247, 255, 1.0))),
            ),
            onTap: () 
              close(context, snapshot.data[index] as Suggestion);
            ,
          ),
          itemCount: snapshot.data.length,
        )
            : Padding(
              padding: const EdgeInsets.only(left: 32.0, top: 16.0),
              child: Container(child: Text('Loading...', style: Style.textStyle(size: 16, color: Color.fromRGBO(239, 247, 255, 1.0)))),
            );
        
      ),
    );
  

main.dart (where I call the SearchDelegate)

onTap: () async 
   final sessionToken = Uuid().v4();
   final Suggestion result = await showSearch(
      context: context,
      delegate: AddressSearch(sessionToken),
   );
   if (result != null) 
      BlocProvider.of<WeatherBloc>(context).add(
         WeatherRequestedByCity(city: (result).description));
      RegExp regExp = RegExp('^(.+?),');
      String city = regExp.stringMatch((result).description).toString();
      if (city != 'null') 
         city = city.substring(0, city.length - 1);
       else 
         city = (result).description;
      
      setState(() 
         location = city;
         currentPage = 0.0;
      );
   

【参考方案1】：

有一个开放的问题允许自定义动画here。我建议对其进行投票以帮助提高其在 Flutter 团队中的优先级。