颤振布局和间距

Question

所以我试图让我的输出看起来像这样，这是我目前的进度

我尝试将小部件放入容器中，但是当我尝试调整文本的填充时，卡片和日历也会发生同样的情况。另外，我也在尝试删除日历 上的月份文本，我在论坛中获得了日历的代码，所以我真的不知道如何解决它。

这是我的代码：

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: buildCalendarPageAppBar(),
  body: Container(
    margin: EdgeInsets.only(top: 15, bottom: 10, left: 17, right: 15),
    width: MediaQuery.of(context).size.width,
    child: Column(children: [
      Text(
        "*Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
 ut labore et dolore magna aliqua.",
        maxLines: 4,
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.start,
        style: TextStyle(
          fontFamily: "DMSans",
          letterSpacing: -0.2,
          fontSize: 15.0,
          color: Colors.grey,
          fontWeight: FontWeight.w500,
        ),
      ),
      Container(
        height: 400,
        child: Card(
          elevation: 2.0,
          color: Colors.white,
          child: Padding(
            padding:
                EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 0),
            child: Container(
                width: Get.width,
                height: 500,
                child: Column(
                  children: <Widget>[
                    buildCalendar(),
                  ],
                )),
          ),
        ),
      ),
      Container(height: 20),
      buildGoButton(),
    ]),
  ),
  );
  }

  PreferredSizeWidget buildCalendarPageAppBar() {
  double profileDimension = 35;
  return PreferredSize(
  preferredSize: Size.fromHeight(58),
  child: AppBar(
    backgroundColor: Colors.white,
    titleSpacing: 10,
    leading: IconButton(
      icon: Icon(
        MdiIcons.chevronLeft,
        size: 30,
        color: Colors.blue,
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    title: Row(
      children: [
        Padding(
          padding: EdgeInsets.only(
            top: 5,
            bottom: 5,
          ),
          child: Text(
            'Appointment',
            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 buildCalendar() {
    return TableCalendar(
  initialCalendarFormat: CalendarFormat.month,
  calendarStyle: CalendarStyle(
      todayColor: Colors.blue,
      selectedColor: Theme.of(context).primaryColor,
      todayStyle: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18.0,
          color: Colors.white)),
  headerStyle: HeaderStyle(
    centerHeaderTitle: true,
    formatButtonDecoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(22.0),
    ),
    formatButtonTextStyle: TextStyle(color: Colors.white),
    formatButtonShowsNext: false,
  ),
  startingDayOfWeek: StartingDayOfWeek.monday,
  onDaySelected: (context, date, events) {
    print(date.toString());
  },
  builders: CalendarBuilders(
    selectedDayBuilder: (context, date, events) => Container(
        margin: const EdgeInsets.all(5.0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.blue, borderRadius: BorderRadius.circular(8.0)),
        child: Text(
          date.day.toString(),
          style: TextStyle(color: Colors.white),
        )),
    todayDayBuilder: (context, date, events) => Container(
        margin: const EdgeInsets.all(5.0),
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.blue, borderRadius: BorderRadius.circular(8.0)),
        child: Text(
          date.day.toString(),
          style: TextStyle(color: Colors.white),
        )),
  ),
  calendarController: _controller,
  );
 }

 Widget buildGoButton() {
 return Padding(
  padding: EdgeInsets.only(left: 20, top: 20, 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("Send Request"),
            color: Colors.blue,
            textColor: Colors.white,
          ),
        ),
      ),
    ],
    ),
   );
  }
  }

如果能提供任何帮助，我将不胜感激。感谢大家！ :D

Answer 1

为每个元素放置一个填充小部件

Answer 2

对于从顶部的间距，您可以使用 SeizedBox。

SizedBox(
  height: 300.0,
  
)

通过所需的高度，它会正常工作。