Forwarding to the next page when clicking on suggestion - flutter

Question

I am using an autocomplete textfield in my flutter application. While typing text in the textfield the user gets the suggestions (via JSON). Then the user should click on a suggestion and should be forwarded to the "SecondPage". At the same time the country of the selected player should also be passed to the "SecondPage".
In the part itemSubmitted I tried to integrate my plan but it doesn't work. The "SecondPage" doesn't start. Can you help here?
This is my code:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('Search'),
),
body: new Center(
child: new Column(children: <Widget>[
new Column(children: <Widget>[
searchTextField = AutoCompleteTextField<PlayersForSearch>(
style: new TextStyle(color: Colors.black, fontSize: 16.0),
decoration: new InputDecoration(
suffixIcon: Container(
width: 85.0,
height: 60.0,
),
contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
filled: true,
hintText: 'Search Player Name',
hintStyle: TextStyle(color: Colors.black)),
itemSubmitted: (item) {
SecondPage(item.country);
MaterialPageRoute(builder: (context) => SecondPage(item.country));
setState(() => searchTextField.textField.controller.text =
item.autocompleteterm);
},
clearOnSubmit: false,
key: key,
suggestions: PlayerViewModel.player_search,
itemBuilder: (context, item) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(item.autocompleteterm,
style: TextStyle(
fontSize: 16.0
),),
Padding(
padding: EdgeInsets.all(15.0),
),
Text(item.country,
)
],
);
},
itemSorter: (a, b) {
return a.autocompleteterm.compareTo(b.autocompleteterm);
},
itemFilter: (item, query) {
return item.autocompleteterm
.toLowerCase()
.startsWith(query.toLowerCase());
}),
]),
])));
}

Answer 1

I believe what's missing is the Navigator.push call to push the SecondPage onto the stack of routes. A MaterialPageRoute will not place itself onto the stack of pages/routes.
Example
When you focus on the text field and press Enter, it will navigate to the SecondPage with the value of the TextFormField.
import 'package:flutter/material.dart';
class NavTextFieldPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Nav TextField Submit'),
),
body: NavTextfieldExample(),
);
}
}
class NavTextfieldExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Navigate to next page',
),
initialValue: 'Japan',
onFieldSubmitted: (item) {
/// Using default Navigator from Scaffold, *push* onto stack SecondPage
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SecondPage(item)));
},
)
],
);
}
}
class SecondPage extends StatelessWidget {
final String country;
SecondPage(this.country);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Nav Second Page'),
),
body: Center(
child: Text('Country: $country'),
),
);
}
}
The key piece above is:
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SecondPage(item)));
which uses the Navigator object to push routes onto your stack of routes (i.e. pages).

Answer 2

please try the following :
. create a SecondPage.dart
. put in a stateless or stateful Widget
. create a route in your materialApp()