我有个问题我想展示一个欢迎屏幕,用不同的屏幕。当显示最后一个屏幕时,也应该显示按钮。以便用户从欢迎屏幕跳到第二个屏幕。我该怎么做?
在我的代码中,它没有regoncie context
,我不知道如何创建if条件。
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条答案
按热度按时间zlwx9yxi1#
您只需检查该项是否包含
button
键并相应地显示按钮对于新问题,您将获得
The instance member 'context' can't be accessed in an initializer.
,将页面视图更改为使用
items
。然后将初始化的幻灯片列表更新到自定义小部件以访问上下文。
更新以下幻灯片
到
完整代码在dartpad.dev中。