In my flutter app I have page with search functionality. It brings me some data from API server with bloc pattern implementation. Now I need to add sub title with text "Recent Searches". While trying to add it overlays my "Enter text to search" text. I can't add it below appbar on top and left side of my screen This is my current stage:
AppBar _appBar() {
return AppBar(
iconTheme: IconThemeData(
color: Colors.white.withOpacity(0.8),
),
title: TextField(
onChanged: _textInputListener.add,
autofocus: true,
controller: _textInputController,
key: Key('searchscreen_input_tf_id'),
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: AppTranslations.of(context).text("enter_text_to_search"),
border: InputBorder.none,
),
),
actions: <Widget>[
IconButton(
key: Key('searchscreen_clear_ib_id'),
icon: const Icon(
Icons.clear,
),
onPressed: () {
if (_textInputController.text.isNotEmpty) {
_textInputController.clear();
_textInputListener.add("");
}
},
)
],
);
}
Widget build(BuildContext context) {
return Container(
color: Color(0xFF131E42),
child: SafeArea(
child: Scaffold(
resizeToAvoidBottomPadding: false,
appBar: _appBar(),
body: BlocBuilder(
bloc: _searchScreenBloc,
builder: (_, SearchScreenState state) {
if (state is InitialSearchScreenState) {
_searchScreenBloc.add(LoadRecent());
return _containerWithPaddings(child: CircularProgressIndicator());
}
if (state is SearchScreenRecentState) {
return _recentList(state.securities);
}
if (state is SearchScreenLoadingDataState) {
return _containerWithPaddings(child: CircularProgressIndicator());
}
if (state is SearchScreenLoadedDataState) {
return _loadedList(state.securities);
}
if (state is SearchScreenErrorState) {
_searchScreenBloc.add(LoadSearchResult(securityName: _textInputController.text));
return _containerWithPaddings(child: CircularProgressIndicator());
}
if (state is SearchScreenNoResultsState) {
return _containerWithPaddings(
child: Text(
AppTranslations.of(context).text("no_results"),
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
),
));
}
throw ArgumentError('$state not in cases');
},
),
),
),
);
}
You could use the bottom
property of AppBar
.
Code Sample
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Title'),
bottom: PreferredSize(
child: Align(
alignment: Alignment.centerLeft,
child: Text('Bottom text'),
),
preferredSize: Size.fromHeight(12.0)),
),
body: Center(
child: MyWidget(),
),
),
);
}
}