【发布时间】：2021-10-23 11:34:53
【问题描述】：
我是 Flutter 的新手，正在尝试克隆一个应用来学习它。我在实际应用中创建了一个类似这样的介绍：introduction screen in real app
我使用 RichText 创建该文本，但不知何故它在屏幕上显示代码：introduction screen in my clone app
代码如下：
class Body extends StatefulWidget {
const Body({Key? key}) : super(key: key);
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
int currentPage = 0;
final List<Map<String, Object>> _introductionData = [
{
"image": "assets/images/intro_1.png",
"title": "",
"text": RichText(
text: const TextSpan(
style: TextStyle(
fontSize: 12,
color: Colors.white,
),
children: [
TextSpan(
text: 'Sign in first time ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'success to get '),
TextSpan(
text: '50% off coupon ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'and '),
TextSpan(
text: 'lottery code ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'to join '),
TextSpan(
text: '"Download app, get big prize" ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'have a chance '),
TextSpan(
text: 'to win a smart tv ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'worth nearly 1000\$.')
],
),
),
},
{
"image": "assets/images/intro_2.png",
"title": "Super convenient online pharmacy",
"text": 'Full of great deals, free shipping from 13$. Accumulate Extracare points after every purchase.',
},
{
"image": "assets/images/intro_3.png",
"title": "Consult with a pharmacist online via video.",
"text": 'Advice on prescriptions and drug use from a team of highly qualified pharmacists.'
},
{
"image": "assets/images/intro_4.png",
"title": "Look up drug information and disease symptoms",
"text": 'Update the latest health information, look up information quickly and accurately.',
},
];
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
'assets/images/intro_background.png',
fit: BoxFit.cover,
height: double.infinity,
alignment: Alignment.topCenter,
),
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 16.0),
child: Column(
children: [
Expanded(
flex: 6,
child: PageView.builder(
onPageChanged: (value) {
setState(() {
currentPage = value;
});
},
itemCount: _introductionData.length,
itemBuilder: (context, index) => IntroductionContent(
image: _introductionData[index]['image'].toString(),
title: _introductionData[index]['title'].toString(),
text: _introductionData[index]['text'].toString(),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(
_introductionData.length,
(index) => buildDot(index: index),
),
),
const Padding(padding: EdgeInsets.only(top: 25)),
DefaultButton(
text: 'Continue',
backgroundColor: Colors.white,
textColor: kPrimaryColor,
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext _context) =>
const AcceptTermsScreen(),
),
);
},
)
],
),
),
)
],
),
),
],
),
);
}
AnimatedContainer buildDot({int? index}) {
return AnimatedContainer(
duration: kAnimationDuration,
margin: const EdgeInsets.only(right: 15),
height: currentPage == index ? 6 : 4,
width: currentPage == index ? 6 : 4,
decoration: BoxDecoration(
color: currentPage == index
? Colors.white
: const Color(0x77FFFFFF),
borderRadius: BorderRadius.circular(3),
),
);
}
}
简介内容代码：
class IntroductionContent extends StatelessWidget {
const IntroductionContent({
Key? key,
this.title,
this.text,
this.image,
}) : super(key: key);
final String? title, text, image;
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
const Spacer(),
const Spacer(),
Image.asset(
image!,
height: 250,
),
const Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Text(
title!,
textAlign: TextAlign.center,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white,
),
),
),
const Padding(padding: EdgeInsets.only(top: 20)),
Text(
text!,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 12,
color: Colors.white,
height: 1.5,
),
),
],
);
}
}
提前感谢您帮我解决这个问题。
【问题讨论】：
标签： android flutter dart richtext