【发布时间】：2022-01-18 11:53:42
【问题描述】：
我正在练习这个代码github 来添加一个带有卡片的主屏幕，如下图所示。单击开始按钮后，它应该重定向到带有卡片的主页。卡片的设计仍然不像图片所示。我用来获取卡片的代码不起作用。有人可以知道如何解决这个问题吗？主要没有错误。镖。错误在 home_page.dart 中。认为我缺少一些代码。 错误显示---->缺少“StatefulWidget.createState”的具体实现。
home_page.dart
import 'package:flutter/material.dart';
import 'package:fashion_app/color_filters.dart';
class HomePage extends StatefulWidget{
@override
_HomePageState createSatate ()=> _HomePageState();
}
class _HomePageState extends State <HomePage> {
final double _borderRadious = 24;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fashion store'),
),
body: ListView(
padding: EdgeInsets.all(16),
children: [
buildQuoteCard(),
buildRoundedCard(),
buildColoredCard(),
buildImageCard(),
buildImageInteractionCard(),
],
),
)
);
}
Widget buildQuoteCard() =>
Card(
child: Padding(
padding: EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'If life were predictable it would cease to be life,
and be without flavor.',
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 12),
Text(
'Eleanor Roosevelt',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
],
),
),
);
Widget buildRoundedCard() =>
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Rounded card',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
'This card is rounded',
style: TextStyle(fontSize: 20),
),
],
),
),
);
Widget buildColoredCard() =>
Card(
shadowColor: Colors.red,
elevation: 8,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Colored card',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
'This card is rounded and has a gradient',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
],
),
),
);
Widget buildImageCard() =>
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Stack(
alignment: Alignment.center,
children: [
Ink.image(
image: NetworkImage(
'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1327&q=80',
),
colorFilter: ColorFilters.greyscale,
child: InkWell(
onTap: () {},
),
height: 240,
fit: BoxFit.cover,
),
Text(
'Card With Splash',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
],
),
);
Widget buildImageInteractionCard() =>
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Column(
children: [
Stack(
children: [
Ink.image(
image: NetworkImage(
'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1327&q=80',
),
height: 240,
fit: BoxFit.cover,
),
Positioned(
bottom: 16,
right: 16,
left: 16,
child: Text(
'Cats rule the world!',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
],
),
Padding(
padding: EdgeInsets.all(16).copyWith(bottom: 0),
child: Text(
'The cat is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.',
style: TextStyle(fontSize: 16),
),
),
ButtonBar(
alignment: MainAxisAlignment.start,
children: [
FlatButton(
child: Text('Buy Cat'),
onPressed: () {},
),
FlatButton(
child: Text('Buy Cat Food'),
onPressed: () {},
)
],
)
],
),
);
}
> main. dart
import 'package:flutter/material.dart';
import 'constants.dart';
import 'home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Auth Screen 1',
theme: ThemeData(
brightness: Brightness.light,
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: kBackgroundColor,
textTheme: TextTheme(
headline4: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
button: TextStyle(color: kPrimaryColor),
headline6: TextStyle(color: Colors.white70, fontWeight: FontWeight.normal),
),
inputDecorationTheme: InputDecorationTheme(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white.withOpacity(.2),
),
),
),
),
home: WelcomeScreen(),
);
}
}
class WelcomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0XFFd5ae48),
body: Column(
children: <Widget>[
Expanded(
child: Container(
height: MediaQuery.of(context).size.height*.4,
padding: EdgeInsets.all(10.0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/girl.png"),
fit: BoxFit.cover,
),
),
),
flex: 3,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(
text: "Let Your Styles Speaks\n",
style: Theme.of(context).textTheme.headline4,
),
TextSpan(
text: "Discover the latest trends in women fashion and explore your personality\n",
style: Theme.of(context).textTheme.headline6,
)
],
),
),
FittedBox(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return HomePage();
},
));
},
child: Container(
margin: EdgeInsets.only(bottom: 25),
padding: EdgeInsets.symmetric(horizontal: 26, vertical: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.black,
),
child: Row(
children: <Widget>[
Text(
"Get started",
style: Theme.of(context).textTheme.button?.copyWith(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20
),
),
SizedBox(width: 10),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
),
],
),
),
],
),
);
}
}
【问题讨论】：
-
错误告诉你 createState() 尚未实现。检查您的拼写 (createSatate)，它应该可以正常工作。
-
完成了。现在当点击开始按钮时，它显示红色和未实现的错误