单击建议时转发到下一页答案

【问题标题】：Forwarding to the next page when clicking on suggestion单击建议时转发到下一页
【发布时间】：2021-04-14 13:24:20
【问题描述】：

我在我的颤振应用程序中使用自动完成文本字段。在文本字段中输入文本时，用户会获得建议（通过 JSON）。然后用户应该点击一个建议并且应该被转发到“SecondPage”。同时选中玩家所在的国家也应该传递到“SecondPage”中。

在 itemSubmitted 部分我尝试整合我的计划，但它不起作用。 “第二页”没有启动。你能帮忙吗？

这是我的代码：

@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());
                }),
          ]),
        ])));
  }

【问题讨论】：

标签： flutter dart autocomplete forwarding search-suggestion

【解决方案1】：

我相信缺少的是 Navigator.push 调用 push SecondPage 到路由堆栈上。 MaterialPageRoute 不会将自己置于页面/路由堆栈中。

示例

当您关注文本字段并按 Enter 键时，它将导航到具有 TextFormField 值的 SecondPage。

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'),
      ),
    );
  }
}

上面的关键部分是：

            Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context) => SecondPage(item)));

它使用Navigator 对象将路由推送到您的路由堆栈（即页面）。

【讨论】：

【解决方案2】：

请尝试以下方法：

。创建一个 SecondPage.dart
。放入无状态或有状态的 Widget
。在你的 materialApp() 中创建一个路由

【讨论】：