颤振英雄动画与文本字段错误

Question

我想在一个屏幕上创建一个搜索功能。概念如下:我有一个标记搜索功能的TextField。当我点击它时，我不想在TextField中键入内容，而是导航到AppBar中带有TextField的另一个屏幕，用户应该在那里进行搜索。(类似于Android上的Facebook App)。但是我想用一个从一个TextField到另一个TextField的英雄转换来实现这一点。

下面是一些代码:

class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Hero(
tag: "search_text_field",
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
size: 24,
),
hintText: "Search",
),
focusNode: AlwaysDisabledFocusNode(),
onTap: () {
Navigator.pushNamed(context, SEARCH_ROUTE);
},
),
),
),
...moreWidgets
],
);
}
}

class SearchScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: AppTheme.grey,
),
onPressed: () {
Navigator.pop(context);
},
),
backgroundColor: Colors.white,
title: Hero(
tag: "search_text_field",
child: TextField(
decoration: InputDecoration(
hintText: "Search",
),
),
),
),
);
}
}

注意，FirstScreen是另一个屏幕中的Widget，该屏幕有一个Scaffold Widget。所以两个屏幕都已经有一个Scaffold Widget了。

英雄转换有效。但是在转换过程中，我得到以下错误:

The following assertion was thrown building TextField(decoration: InputDecoration(hintText: "Search")), dirty, dependencies: [MediaQuery, UnmanagedRestorationScope], state: _TextFieldState#6cb29):
No Material widget found.
TextField widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.
To introduce a Material widget, you can either directly include one, or use a widget that contains Material itself, such as a Card, Dialog, Drawer, or Scaffold.
The specific widget that could not find a Material ancestor was: TextField
decoration: InputDecoration(hintText: "Search"))
dirty
dependencies: [MediaQuery, UnmanagedRestorationScope]
state: _TextFieldState#6cb29
The ancestors of this widget were: 
: Theme
ThemeData#56afb
: MaterialApp
state: _MaterialAppState#ef29b
: MyApp
: BlocProvider<AuthCubit>
...
The relevant error-causing widget was: 
TextField file:///Users/user/StudioProjects/project/lib/search_screen.dart:22:18
When the exception was thrown, this was the stack: 
#0      debugCheckHasMaterial.<anonymous closure> (package:flutter/src/material/debug.dart:27:7)
#1      debugCheckHasMaterial (package:flutter/src/material/debug.dart:48:4)
#2      _TextFieldState.build (package:flutter/src/material/text_field.dart:1116:12)
#3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4691:27)
#4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4574:15)
...

我想我得到了什么是错误的:在英雄过渡期间，TextField小部件没有包装在一个材料小部件内，这会导致错误(但我不确定)。

那么我能做些什么呢?

提前感谢:)

Answer 1

用Material包裹TextField。

完整代码。

import 'package:flutter/material.dart';
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Hero(
tag: "search_text_field",
child: Material(
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
size: 24,
),
hintText: "Search",
),
// focusNode: AlwaysDisabledFocusNode(),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SearchScreen(),
));
},
),
),
),
),
// ...moreWidgets
],
),
);
}
}
class SearchScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.grey,
),
onPressed: () {
Navigator.pop(context);
},
),
backgroundColor: Colors.white,
title: Hero(
tag: "search_text_field",
child: Material(
child: TextField(
decoration: InputDecoration(
hintText: "Search",
),
),
),
),
),
);
}
}