英文:
Show button in the last item of a welcomescreen
问题
以下是您要翻译的内容:
WelcomeScreen.dart
import 'package:flutter/material.dart';
import '/items.dart';
import '/SecondRoute.dart';
class WelcomeScreen extends StatefulWidget {
@override
_WelcomeScreenState createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen> {
List<Widget> slides = items
.map((item) => Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Image.asset(
item['image'],
fit: BoxFit.fitWidth,
width: 220.0,
alignment: Alignment.bottomCenter,
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
children: <Widget>[
Text(item['header'],
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.w300,
color: Color(0XFF3F3D56),
height: 2.0)),
Text(
item['description'],
style: TextStyle(
color: Colors.grey,
letterSpacing: 1.2,
fontSize: 16.0,
height: 1.3),
textAlign: TextAlign.center,
),
if (true)
ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SecondRoute()),
);
},
),
],
),
),
)
],
),
))
.toList();
List<Widget> indicator() => List<Widget>.generate(
slides.length,
(index) => Container(
margin: EdgeInsets.symmetric(horizontal: 3.0),
height: 10.0,
width: 10.0,
decoration: BoxDecoration(
color: currentPage.round() == index
? Color(0XFF256075)
: Color(0XFF256075).withOpacity(0.2),
borderRadius: BorderRadius.circular(10.0)),
));
double currentPage = 0.0;
final _pageViewController = new PageController();
@override
void initState() {
super.initState();
_pageViewController.addListener(() {
setState(() {
currentPage = _pageViewController.page!;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Stack(
children: <Widget>[
PageView.builder(
controller: _pageViewController,
itemCount: slides.length,
itemBuilder: (BuildContext context, int index) {
return slides[index];
},
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(top: 70.0),
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: indicator(),
),
),
),
],
),
),
);
}
}
items.dart
List items = [
{
"header": "Learn",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/2.png"
},
{
"header": "Build",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/3.png"
},
{
"header": "Launch",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/1.png"
},
{
"header": "Invest",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/5.png"
},
{
"header": "Travel",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/4.png",
"button": "true",
},
];
英文:
I have a problem. I want to show a welcomescreen, with different screen. And when the last screen is shown the button should be also shown. So that the user jumps from welcomescreen to the secondscreen. How can I do this?
In my code it does not regoncie the context
and I don't know how I could create the if condition.
WelcomeScreen.dart
import 'package:flutter/material.dart';
import '/items.dart';
import '/SecondRoute.dart';
class WelcomeScreen extends StatefulWidget {
@override
_WelcomeScreenState createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen> {
List<Widget> slides = items
.map((item) => Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Image.asset(
item['image'],
fit: BoxFit.fitWidth,
width: 220.0,
alignment: Alignment.bottomCenter,
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
children: <Widget>[
Text(item['header'],
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.w300,
color: Color(0XFF3F3D56),
height: 2.0)),
Text(
item['description'],
style: TextStyle(
color: Colors.grey,
letterSpacing: 1.2,
fontSize: 16.0,
height: 1.3),
textAlign: TextAlign.center,
),
if (true)
ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
},
),
],
),
),
)
],
)))
.toList();
List<Widget> indicator() => List<Widget>.generate(
slides.length,
(index) => Container(
margin: EdgeInsets.symmetric(horizontal: 3.0),
height: 10.0,
width: 10.0,
decoration: BoxDecoration(
color: currentPage.round() == index
? Color(0XFF256075)
: Color(0XFF256075).withOpacity(0.2),
borderRadius: BorderRadius.circular(10.0)),
));
double currentPage = 0.0;
final _pageViewController = new PageController();
@override
void initState() {
super.initState();
_pageViewController.addListener(() {
setState(() {
currentPage = _pageViewController.page!;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Stack(
children: <Widget>[
PageView.builder(
controller: _pageViewController,
itemCount: slides.length,
itemBuilder: (BuildContext context, int index) {
return slides[index];
},
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(top: 70.0),
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: indicator(),
),
)
// ),
)
// )
],
),
),
);
}
}
items.dart
List items = [
{
"header": "Learn",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/2.png"
},
{
"header": "Build",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/3.png"
},
{
"header": "Launch",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/1.png"
},
{
"header": "Invest",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/5.png"
},
{
"header": "Travel",
"description":
"Online chat which provides its users maximum functionality to simplify the search",
"image": "assets/images/4.png",
"button": "true",
}
];
答案1
得分: 2
只需检查项目是否包含button
键,并相应显示按钮。
if (item.containsKey('button') && item['button'] == 'true')
ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
},
),
对于您遇到的新问题The instance member 'context' can't be accessed in an initializer.
,请将PageView更改为使用items
。
PageView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return slide(items[index]);
},
),
然后,更新幻灯片的初始化列表以访问上下文。
从:
List<Widget> slides = items
.map((item) => Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
更改为:
Widget slide(Map<String, dynamic> item) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
children: <Widget>[
完整代码在dartpad.dev中。
英文:
You just have to check if the item contains the button
key and display the button accordingly
if (item.containsKey('button') && item['button'] == 'true')
ElevatedButton(
child: const Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
},
),
For the new issue you are getting
The instance member 'context' can't be accessed in an initializer.
,
Change the pageview to use the items
.
PageView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return slide(items[index]);
},
),
Then update the initialized list of slides to the custom widget to access the context.
Update the slides from
List<Widget> slides = items
.map((item) => Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
to
Widget slide(Map<String, dynamic> item) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: Column(
children: <Widget>[
Full code in dartpad.dev.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论