私は1つを持っているStatefulWidget他に私をナビゲートボタン、とフラッターにStatefulWidget使用しますNavigator.push()。2番目のウィジェットで、グローバル状態（一部のユーザー設定）を変更しています。2番目のウィジェットから最初のウィジェットに戻るとNavigator.pop()、最初のウィジェットの使用は古い状態ですが、強制的にリロードしたいと思います。これを行う方法はありますか？私は1つのアイデアを持っていますが、それは醜いように見えます：
回答:
ここでできることがいくつかあります。@Mahiの正解はもう少し簡潔で、OPが求めていたshowDialogではなく実際にpushを使用する可能性があります。これは、以下を使用する例ですNavigator.push。
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
color: Colors.green,
child: new Column(
children: <Widget>[
new RaisedButton(
onPressed: () => Navigator.pop(context),
child: new Text("back"),
),
],
),
);
}
}
class FirstPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new FirstPageState();
}
class FirstPageState extends State<FirstPage> {
Color color = Colors.white;
@override
Widget build(BuildContext context) {
return new Container(
color: color,
child: new Column(
children: <Widget>[
new RaisedButton(
child: new Text("next"),
onPressed: () {
Navigator
.push(
context,
new MaterialPageRoute(builder: (context) => new SecondPage()),
)
.then((value) {
setState(() {
color = color == Colors.white ? Colors.grey : Colors.white;
});
});
}),
],
),
);
}
}
void main() => runApp(
new MaterialApp(
builder: (context, child) => new SafeArea(child: child),
home: new FirstPage(),
),
);
ただし、これを行う別の方法があり、ユースケースにうまく適合する可能性があります。global最初のページのビルドに影響を与えるものとしてを使用している場合は、AttachedWidgetを使用してグローバルユーザー設定を定義できます。これらが変更されるたびに、FirstPageが再構築されます。これは、以下に示すようにステートレスウィジェット内でも機能します（ただし、ステートフルウィジェットでも機能するはずです）。
フラッターのinheritedWidgetの例は、アプリのテーマですが、ここにあるように直接ビルドするのではなく、ウィジェット内で定義します。
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
color: Colors.green,
child: new Column(
children: <Widget>[
new RaisedButton(
onPressed: () {
ColorDefinition.of(context).toggleColor();
Navigator.pop(context);
},
child: new Text("back"),
),
],
),
);
}
}
class ColorDefinition extends InheritedWidget {
ColorDefinition({
Key key,
@required Widget child,
}): super(key: key, child: child);
Color color = Colors.white;
static ColorDefinition of(BuildContext context) {
return context.inheritFromWidgetOfExactType(ColorDefinition);
}
void toggleColor() {
color = color == Colors.white ? Colors.grey : Colors.white;
print("color set to $color");
}
@override
bool updateShouldNotify(ColorDefinition oldWidget) =>
color != oldWidget.color;
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var color = ColorDefinition.of(context).color;
return new Container(
color: color,
child: new Column(
children: <Widget>[
new RaisedButton(
child: new Text("next"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondPage()),
);
}),
],
),
);
}
}
void main() => runApp(
new MaterialApp(
builder: (context, child) => new SafeArea(
child: new ColorDefinition(child: child),
),
home: new FirstPage(),
),
);
継承されたウィジェットを使用する場合、プッシュしたページのポップを監視することを心配する必要はありません。これは基本的なユースケースでは機能しますが、より複雑なシナリオでは問題が発生する可能性があります。
からデータを渡すことは2つあります
1ページ目でご利用ください
// sending "Foo" from 1st
Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
2ページ目でご利用ください。
class Page2 extends StatelessWidget {
final String string;
Page2(this.string); // receiving "Foo" in 2nd
...
}
2ページ目でご利用ください
// sending "Bar" from 2nd
Navigator.pop(context, "Bar");
これを1ページ目で使用します。以前に使用したものと同じですが、ほとんど変更がありません。
// receiving "Bar" in 1st
String received = await Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
簡単なトリックを使用することですNavigator.pushReplacement方法を
ページ1
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Page2(),
),
);
ページ2
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Page1(),
),
);
pushReplacementを使用して、新しいルートを指定できます
この作品は本当に良いです、私はフラッターページからこのドキュメントから得ました：フラッタードキュメント
最初のページからナビゲーションを制御する方法を定義しました。
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => AddDirectionPage()),
);
//below you can get your result and update the view with setState
//changing the value if you want, i just wanted know if i have to
//update, and if is true, reload state
if (result) {
setState(() {});
}
}
だから、私はインク壺からアクションメソッドでそれを呼び出しますが、ボタンからも呼び出すことができます：
onTap: () {
_navigateAndDisplaySelection(context);
},
そして最後に2ページ目で、何かを返すために（私はブール値を返しました、あなたはあなたが望むものは何でも返すことができます）：
onTap: () {
Navigator.pop(context, true);
}
await Navigator....popの結果値をそのまま省略することもできます。
これを2番目の画面（非同期関数内）にプッシュする場所に配置します
Function f;
f= await Navigator.pushNamed(context, 'ScreenName');
f();
あなたがポップしているところにこれを置いてください
Navigator.pop(context, () {
setState(() {});
});
setState内部で呼ばれているpopデータを更新するために閉鎖。
setState引数として正確にどこに渡しますか？あなたは基本的にsetStateクロージャの中で呼んでいます。引数として渡さない。
Navigator.pop。
私の解決策は、SecondPageに関数パラメーターを追加し、FirstPageから実行されているリロード関数を受け取り、Navigator.pop（context）行の前で関数を実行することでした。
一ページ目
refresh() {
setState(() {
//all the reload processes
});
}
次に、次のページにプッシュすると...
Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage(refresh)),);
SecondPage
final Function refresh;
SecondPage(this.refresh); //constructor
次に、ナビゲーターポップラインの前に、
widget.refresh(); // just refresh() if its statelesswidget
Navigator.pop(context);
前のページからリロードする必要があるものはすべて、ポップ後に更新する必要があります。
dynamic resultコンテキストをポップしているときにaを返しsetState((){})、値がtrueそうでない場合はtheを呼び出して、状態をそのままにしておくことができます。
参考までに、いくつかのコードスニペットを貼り付けました。
handleClear() async {
try {
var delete = await deleteLoanWarning(
context,
'Clear Notifications?',
'Are you sure you want to clear notifications. This action cannot be undone',
);
if (delete.toString() == 'true') {
//call setState here to rebuild your state.
}
} catch (error) {
print('error clearing notifications' + error.toString());
}
}
Future<bool> deleteLoanWarning(BuildContext context, String title, String msg) async {
return await showDialog<bool>(
context: context,
child: new AlertDialog(
title: new Text(
title,
style: new TextStyle(fontWeight: fontWeight, color: CustomColors.continueButton),
textAlign: TextAlign.center,
),
content: new Text(
msg,
textAlign: TextAlign.justify,
),
actions: <Widget>[
new Container(
decoration: boxDecoration(),
child: new MaterialButton(
child: new Text('NO',),
onPressed: () {
Navigator.of(context).pop(false);
},
),
),
new Container(
decoration: boxDecoration(),
child: new MaterialButton(
child: new Text('YES', ),
onPressed: () {
Navigator.of(context).pop(true);
},
),
),
],
),
) ??
false;
}
よろしく、マヒ
Navigator.pop(context, true)ですよね？しかし、どうすればこのtrue値を取得できますか？使い方BuildContext？
setState() called after dispose(): This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback. The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. ....
if(!mounted) return;呼び出すたびに、破棄setState((){});されたウィジェットやアクティブでなくなったウィジェットの更新を回避できます。
ステートレスウィジェットの1つを強制的に再構築する必要がありました。ステートフルを使用したくありませんでした。この解決策を思いついた：
await Navigator.of(context).pushNamed(...);
ModalRoute.of(enclosingWidgetContext);
contextとencloseingWidgetContextは、同じコンテキストでも異なるコンテキストでもかまいません。たとえば、StreamBuilderの内部からプッシュする場合、それらは異なります。
ModalRouteではここでは何もしません。単独でサブスクライブするという行為は、再構築を強制するのに十分です。
今日、私は同じ状況に直面しましたが、はるかに簡単な方法でそれを解決することができました。最初のステートフルクラスで使用されるグローバル変数を定義し、2番目のステートフルウィジェットに移動すると、グローバルの値を更新しました。最初のウィジェットを自動的に更新する変数。これが例です（私は急いで書いたので、足場やマテリアルアプリを配置しませんでした、私は自分のポイントを説明したかっただけです）：
import 'package:flutter/material.dart';
int count = 0 ;
class FirstPage extends StatefulWidget {
FirstPage({Key key}) : super(key: key);
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
@override
Widget build(BuildContext context) {
return InkWell(
onTap(){
Navigator.of(context).push(MaterialPageRoute(builder: (context) =>
new SecondPage());
},
child: Text('First', style : TextStyle(fontSize: count == 0 ? 20.0 : 12.0)),
),
}
class SecondPage extends StatefulWidget {
SecondPage({Key key}) : super(key: key);
@override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
return IconButton(
icon: new Icon(Icons.add),
color: Colors.amber,
iconSize: 15.0,
onPressed: (){
count++ ;
},
),
}
Navigator.pop()前の状態を保持した後、このコードでは何も起こりません。私は何かが足りないのですか？Navigator.push()setState
つまり、ウィジェットに状態を監視させる必要があります。これには状態管理が必要です。
私の方法は、プロバイダに基づいていて説明フラッターアーキテクチャのサンプルだけでなく、フラッタードキュメント。より簡潔な説明についてはそれらを参照してくださいが、多かれ少なかれ手順は次のとおりです。
いくつかのAPIプロセスを待つために、複数の状態に「dataとisLoading」を付けることができます。モデル自体は拡張されChangeNotifierます。
これは可能性がありConsumerかSelector。
状態モデルの場合、クラスは多かれ少なかれ次のようになります。notifyListenersどちらが変更をブロードキャストするかに注意してください。
class DataState extends ChangeNotifier{
bool isLoading;
Data data;
Future loadData(){
isLoading = true;
notifyListeners();
service.get().then((newData){
isLoading = false;
data = newData;
notifyListeners();
});
}
}
さて、ウィジェットです。これは非常にスケルトンコードになります。
return ChangeNotifierProvider(
create: (_) => DataState()..loadData(),
child: ...{
Selector<DataState, bool>(
selector: (context, model) => model.isLoading,
builder: (context, isLoading, _) {
if (isLoading) {
return ProgressBar;
}
return Container(
child: Consumer<DataState>(builder: (context, dataState, child) {
return WidgetData(...);
}
));
},
),
}
);
状態モデルのインスタンスは、ChangeNotifierProviderによって提供されます。セレクターとコンシューマーは、それぞれisLoadingとの状態を監視しdataます。それらの間に大きな違いはありませんが、個人的にそれらをどのように使用するかは、ビルダーが提供するものによって異なります。コンシューマーは状態モデルへのアクセスを提供するため、loadDataその直下にあるウィジェットの呼び出しは簡単です。
そうでない場合は、を使用できますProvider.of。2番目の画面から戻ったときにページを更新したい場合は、次のようにすることができます。
await Navigator.push(context,
MaterialPageRoute(
builder: (_) {
return Screen2();
));
Provider.of<DataState>(context, listen: false).loadData();
私のために働いた：
...
onPressed: (){pushUpdate('/somePageName');}
...
pushUpdate (string pageName) async { //in the same class
await pushPage(context, pageName);
setState(() {});
}
//---------------------------------------------
//general sub
pushPage (context, namePage) async {
await Navigator.pushNamed(context, namePage);
}
この場合、どのようにポップするか（UIのボタンまたはAndroidの「戻る」）は関係ありません。更新が行われます。