颤振卡颜色

kru*_*kat 6 flutter flutter-layout

我想制作这张卡片,我已将其分为几列(扩展小部件),我面临的问题是:我无法将颜色容器(右列的父级)设置为全高,因此只有其中一部分显示彩色背景。

我拥有的:

在此输入图像描述

我想要的是: 在此输入图像描述

  • 我尝试了 Flutter Inspector 工具,发现容器及其子列没有获得完整高度(即使在输入 mainAxisSize: MainAxisSize.max 之后)

  • 我没有使用 Expanded,而是尝试使用 FractionSized.. 但运气不佳。

代码 :

    import 'package:flutter/material.dart';

    class SubjectPage extends StatelessWidget {
      final String dayStr;
      SubjectPage(this.dayStr);

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 0),
          child: Column(
            children: <Widget>[
              Card(
                child: Row(
                  children: <Widget>[
                    // Column 1
                    Expanded(
                      flex: 7,
                      child: Padding(
                        padding: EdgeInsets.all(20.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            getTitle("UEC607"),
                            getSubName("Data Communication & Protocol"),
                            getVenue("E-204"),
                          ],
                        ),
                      ),
                    ),
                    // Column 2
                    // The Place where I am Stuck//
                    Expanded(
                      flex: 3,
                      child: Container(
                        color: Colors.blue,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            getType("L"),
                            getTime("9:00"),
                          ],
                        ),
                      ),
                    )
                  // COlumn 2 End
                  ],
                ),
              )
            ],
          ),
        );
      }

      // Get Title Widget
      Widget getTitle(String title) {
        return Padding(
          padding: EdgeInsets.only(bottom: 8.0),
          child: Text(title),
        );
      }

      // Get Subject Name
      Widget getSubName(String subName) {
        return Padding(
          padding: EdgeInsets.only(bottom: 25.0),
          child: Text(subName),
        );
      }

      // Get Venue Name
      Widget getVenue(String venue) {
        return Padding(
          padding: EdgeInsets.only(bottom: 0.0),
          child: Text(venue),
        );
      }

      Widget getType(String type) {
        return Padding(
          padding: EdgeInsets.only(bottom: 10.0),
          child: Text(type),
        );
      }

      Color getColor(String type) {
        if (type == "L") {
          return Color(0xff74B1E9);
        }
      }

      Widget getTime(String time) {
        return Text(time);
      }
    }
Run Code Online (Sandbox Code Playgroud)

San*_*and 5

设置容器高度

Expanded(
                      flex: 3,
                      child: Container(
                        height: double.infinity,
                        color: Colors.blue,
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            getType("L"),
                            getTime("9:00"),
                          ],
                        ),
                      ),
                    )
Run Code Online (Sandbox Code Playgroud)