Forwarding to the next page when clicking on suggestion

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 :

1. . create a SecondPage.dart
2. . put in a stateless or stateful Widget
3. . create a route in your materialApp()