How to Remove Splash From Flutter's Search Delegate

Viewed 500

I'm making the first app I want to put on the App Store. It's a weather app. Gonna name it Aer so check it out soon! But anyways, I'm mostly done. There's one thing bugging me though. There's this weird splash that happens whenever I search for a city (whenever I return a widget within the SearchDelegate or go into and out of it). My guess is that it has something to do with the animation but I can't figure out how to change it or if it even is that. Below is my code (beware of copy-paste cause I did it fast). I would really love some help on getting rid of this. I've also attached a gif to better showcase what I'm talking about. Thanks!enter image description here

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 Answers

There is an open issue to allow for animation customization here. I'd recommend upvoting it to help increase its priority with the Flutter team.

Related