再会！所以我对颤动相当陌生，所以我有点不知道如何布局几个小部件，更不用说卡片内的几个小部件了。
所以我想提出这种输出[1]：https ://i.stack.imgur.com/EpquW.png
但是当我尝试运行我的代码时，它返回为空白（参见图片以供参考）[2]：https ://i.stack.imgur.com/GFtgY.png
这是我的代码：
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:flutter/cupertino.dart';
class SetAppointmentPage extends StatefulWidget {
static const String routeName = '/setappointment';
@override
_SetAppointmentPageState createState() => new _SetAppointmentPageState();
}
class _SetAppointmentPageState extends State<SetAppointmentPage> {
bool isSelected = false;
double height = Get.height;
double width = Get.width;
final itemPositionsListener = ItemPositionsListener.create();
int topItem = 0;
@override
void initState() {
super.initState();
itemPositionsListener.itemPositions.addListener(() {
final positions = itemPositionsListener.itemPositions.value;
setState(() {
topItem = positions.isNotEmpty ? positions.first.index : null;
});
});
}
Widget buildhomePageAppBar() {
double profileDimension = 35;
return AppBar(
backgroundColor: Colors.white,
titleSpacing: 0,
title: Padding(
padding: EdgeInsets.only(
left: 20,
),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Image(
image: AssetImage('assets/images/plain_logo.png'),
height: 30,
),
),
SizedBox(width: 5),
Text(
'Virtex',
style: TextStyle(
color: Colors.black87,
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: FontWeight.bold,
),
)
],
),
),
actions: [
Padding(
padding: EdgeInsets.only(
top: 10,
bottom: 10,
),
child: Container(
height: profileDimension,
width: profileDimension,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black54,
width: 2,
),
borderRadius: BorderRadius.circular(50),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image(
width: profileDimension,
height: profileDimension,
image: AssetImage(
'assets/images/profile-image.jpeg',
),
fit: BoxFit.cover,
),
),
),
),
SizedBox(width: 20),
],
);
}
Widget buildAppointmentText =
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Container(
padding: EdgeInsets.all(10.0),
child: Text(
"AVAILABLE APPOINTMENT SLOTS",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
]);
Widget buildDateText = Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Text(
'May 18, 2021',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
fontWeight: FontWeight.w500,
),
),
);
Widget buildShowCalendar = Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Text(
'Show Calendar',
style: TextStyle(
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.w500,
),
),
);
Widget buildTimeButton = Padding(
padding: EdgeInsets.only(left: 20, top: 90, right: 40),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: SizedBox(
height: 50.0,
width: 150.0,
child: RaisedButton(
onPressed: () {},
child: Text("11 AM"),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black, width: 1)),
color: Colors.white,
textColor: Colors.blue,
),
),
),
Container(
child: SizedBox(
height: 50.0,
width: 150.0,
child: RaisedButton(
onPressed: () {},
child: Text("2 PM"),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black, width: 1)),
color: Colors.white,
textColor: Colors.blue,
),
),
),
Container(
child: SizedBox(
height: 50.0,
width: 150.0,
child: RaisedButton(
onPressed: () {},
child: Text("3 PM"),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black, width: 1)),
color: Colors.white,
textColor: Colors.black,
),
),
),
],
),
);
Widget buildAppointmentEndText = Padding(
padding: EdgeInsets.only(
top: 5,
bottom: 5,
),
child: Text(
'*Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum' +
'Dolor Lorem Ipsum Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor'));
Widget buildGoButton = Padding(
padding: EdgeInsets.only(left: 20, top: 90, right: 40),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: SizedBox(
height: 50.0,
width: 150.0,
child: RaisedButton(
onPressed: () {},
child: Text("Cancel"),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.blue, width: 1)),
color: Colors.white,
textColor: Colors.blue,
),
),
),
Container(
child: SizedBox(
height: 50.0,
width: 150.0,
child: RaisedButton(
onPressed: () {},
child: Text("Next"),
color: Colors.blue,
textColor: Colors.white,
),
),
),
],
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildhomePageAppBar(),
body: Container(
margin: EdgeInsets.only(top: 0),
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Card(
elevation: 1.0,
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
buildAppointmentText,
Expanded(
child: Column(
children: <Widget>[
buildDateText,
buildTimeButton,
buildShowCalendar,
],
))
],
),
),
),
Column(
children: [
buildGoButton,
],
)
],
),
),
);
} }
另外，是否有更有效或其他方式可以随时间创建这些按钮？我将不胜感激任何帮助或建议。