[英]How do i use flutter variables from main.dart in other screen.dart files in the same lib folder?
I wanted to create an app that randomly generates my lucky number when i press floatingActionButton.我想创建一个应用程序,当我按下 floatActionButton 时,它会随机生成我的幸运数字。 I wanted to do it within 2 dart files.. let me show you the code in dart.main and first_screen.dart.
我想在 2 个 dart 文件中完成。让我向您展示 dart.main 和 first_screen.dart 中的代码。
dart.main dart.main
import 'package:demo/app_screens/first_screen.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyFlutterApp()
));
class MyFlutterApp extends StatefulWidget {
@override
_MyFlutterAppState createState() => _MyFlutterAppState();
}
class _MyFlutterAppState extends State<MyFlutterApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
centerTitle: true,
title: Text('My first App',style: TextStyle(color: Colors.black, fontSize: 25.0),),
),
body: FirstScreen(),
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
int thatNum = generateLuckyNumber();
});},
child: Icon(Icons.add),
),
);
}
}
and first_screen.dart in the lib/screens directory和 lib/screens 目录中的first_screen.dart
import 'dart:math';
import 'package:flutter/material.dart';
class FirstScreen extends StatefulWidget{
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Material(color: Colors.lightBlue,
child: Center(
child: Text('My lucky number is ${thatNum}',style: TextStyle(
fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
),
);
}
}
int generateLuckyNumber() {
var random= Random();
int luckyNumber= random.nextInt(10);
return luckyNumber;
}
I would like to use the varibale thatNum declared in main.dart file in the first_screen.dart file.. How do you do that?我想使用 first_screen.dart 文件中 main.dart 文件中声明的变量 thatNum .. 你是怎么做到的?
The easiest way to do this, pass the thatNum
in FirstScreen
constructor.要做到这一点最简单的方法,通过
thatNum
在FirstScreen
构造。 Do the required changes given below进行下面给出的所需更改
class _MyFlutterAppState extends State<MyFlutterApp> {
int thatNum; // <- declare thatNum in the class
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.yellow,
centerTitle: true,
title: Text('My first App',style: TextStyle(color: Colors.black, fontSize: 25.0),),
),
body: FirstScreen(thatNum:thatNum), // <-- pass thatNum in constructor
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
thatNum = generateLuckyNumber(); /* <- generateLuckyNumber and assign to thatNum */
});},
child: Icon(Icons.add),
),
);
}
}
In the FirstScreen
declare thatNum
在
FirstScreen
声明thatNum
class FirstScreen extends StatefulWidget{
final thatNum; // <- declare thatNum
FirstScreen({this.thatNum});
@override
_FirstScreenState createState() => _FirstScreenState();
}
In _FirstScreenState
check whether the widget.thatNum
is null or not.在
_FirstScreenState
检查是否widget.thatNum
为空或不是。 If it is null assign Loading text or show thatNum
if not widget.thatNum
is not null.如果它为空,则分配加载文本或显示
thatNum
如果不是小部件widget.thatNum
不为空。
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Material(color: Colors.lightBlue,
child: Center(
child: Text('My lucky number is ${widget.thatNum??"Loading"}',style: TextStyle(
fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
),
);
}
}
Note: You can also use state management solution, but the above solution solves the issue easily.注意:您也可以使用状态管理解决方案,但上述解决方案很容易解决问题。 Still, you can check state management solution here
不过,您可以在此处查看状态管理解决方案
You can do this thing in two ways:你可以通过两种方式来做这件事:
body: FirstScreen(thatNum), // in Scaffold of main.dart file.
Use it like:像这样使用它:
class FirstScreen extends StatefulWidget{
final thatNum;
FirstScreen(this.thatNum);
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Material(color: Colors.lightBlue,
child: Center(
child: Text('My lucky number is ${widget.thatNum} ??"Loading"}',style: TextStyle(
fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
),
);
}
}
Create an InheritedWidget as follows.创建一个 InheritedWidget 如下。
class MyInheritedWidget extends InheritedWidget {
const MyInheritedWidget({
Key key,
@required this.thatNum,
@required Widget child,
}) : assert(color != null),
assert(child != null),
super(key: key, child: child);
final thatNum;
static MyInheritedWidget of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
}
@override
bool updateShouldNotify(MyInheritedWidget old) => thatNum!= old.thatNum;
}
Change: body: FirstScreen(),
to: body: MyInheritedWidget(child: FirstScreen(), thatNum:thatNum),
更改:
body: FirstScreen(),
改为: body: MyInheritedWidget(child: FirstScreen(), thatNum:thatNum),
Now all the decendent of MyInheritedWidget will be able to access thatNum by using context like:现在 MyInheritedWidget 的所有后代都可以使用如下上下文访问 thatNum:
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
final thatNum = MyInheritedWidget.of(context).thatNum;
return Material(color: Colors.lightBlue,
child: Center(
child: Text('My lucky number is $thatNum ??"Loading"}',style: TextStyle(
fontSize: 28,color: Colors.black,backgroundColor:Colors.white)),
),
);
}
}
If you have a child Widget that needs thatNum
and that child widget doesn't need to pass thatNum
to any further widget then thatNum
should be passed in dependency.如果您有一个需要
thatNum
的子 Widget 并且该子小部件不需要将thatNum
传递给任何进一步的小部件,那么thatNum
应该依赖传递。
If you have a long hierarchy of Widget that need this data then InheritedWidget must be used to avoid passing data in each and every child's constructor.如果您有一个很长的 Widget 层次结构需要这些数据,那么必须使用 InheritedWidget 来避免在每个孩子的构造函数中传递数据。
I hope this helps, in case of any doubt please comment.我希望这会有所帮助,如有任何疑问,请发表评论。 If this answer helps you then please accept and up-vote it.
如果这个答案对您有帮助,请接受并投票。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.