底部溢出 81 像素

Question

I'm pretty much self-tutoring flutter and I'm working on a personal project. I wrapped it to singlechildscrollview but it still produces the problem. The code below:

class ScheduleDetail extends StatefulWidget {
  var data;
  ScheduleDetail(this.data);
  @override
  // ScheduleDetail({Key key, this.todos}) : super(key: key);
  _ScheduleDetailState createState() => _ScheduleDetailState();
}

class _ScheduleDetailState extends State<ScheduleDetail>{
  String foos = 'One';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance =
        ScreenUtil(width: 750, height: 1425, allowFontScaling: true)
          ..init(context);
    return Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          // title:  Text("String Master"),
          title: SvgPicture.asset('assets/images/Logo_small.svg'),
          centerTitle: true,
          backgroundColor: Colors.transparent,
        ),
        body: BackgroundImageWidget(
          child: Center(
            child: Container(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    height: ScreenUtil.getInstance().setHeight(150),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(
                      horizontal: ScreenUtil.getInstance().setWidth(40),
                    ),
                    child: Text(
                      AppStrings.scheduleTitle,
                      style: TextStyles.appName,
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Container(
                    height: ScreenUtil.getInstance().setHeight(50),
                  ),
                  SingleChildScrollView(
                    child: ConstrainedBox(
                      constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.82),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Expanded(
                            child: Padding(
                                padding: EdgeInsets.symmetric(
                                  horizontal: ScreenUtil.getInstance().setWidth(40),
                                ),
                                child: new Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    _buildTopCard(),
                                    SizedBox(height: 10),
                                    _buildTimeCard(),
                                    SizedBox(height: 10),
                                    ListTile(
                                      title: Text(
                                        "Calendar",
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            color: Colors.green,
                                            fontSize: 16
                                        ),
                                      ),
                                    ),
                                    Container(color: Colors.grey, height: 1),
                                    _buildNoticeExpansionTile(),
                                    Container(color: Colors.grey, height: 1),
                                    _buildMemoExpansionTile(),
                                  ],
                                )),
                          ),
                        ],
                      )
                    )
                  ),
            ],
          )),
        )));
  }

  Widget _buildTopCard() {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(7.0),
      ),
      elevation: 15,
      child: ClipPath(
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(7.0))),
        child: Stack(
          children: <Widget>[
            Container(
                height: 150,
                decoration: BoxDecoration(
                  border: Border(
                      top: BorderSide(color: Colors.green, width: 30)),
                  color: Colors.white,
                ),
                alignment: Alignment.centerLeft,
                child: Column(
                  children: <Widget>[
                    ListTile(
                      title: Text(widget.data['eventTitle'],
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.green,
                        ),
                      ),
                      subtitle: Text(
                        widget.data['location'],
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.grey.shade600
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 10, right: 10),
                      child:
                        Divider(color: Colors.grey),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 10, right: 10),
                      child: Row (
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              widget.data['startDate'] + " " + widget.data['timeStart'],
                              style: TextStyle(
                                  color: Colors.grey.shade600,
                                  fontStyle: FontStyle.italic,
                                  fontSize: 14
                              ),
                            ),
                            Spacer(flex: 2),
                            Text(
                              widget.data['startDate'] + " " + widget.data['timeEnd'],
                              style: TextStyle(
                                  color: Colors.grey.shade600,
                                  fontSize: 14,
                                  fontStyle: FontStyle.italic,
                              ),
                            ),
                          ]
                      )
                    ),
                  ],
                )
            ),
            Positioned(
                left: 10,
                top: 7,
                width: 325,
                child: Container(
                  padding: EdgeInsets.only(bottom: 10, left: 5, right: 5),
                  color: Colors.transparent,
                  child: Row (
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        widget.data['startDate'],
                        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
                      ),
                      Spacer(flex: 2),
                      Text(
                        widget.data['timeStart'],
                        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
                      ),
                    ],
                  )
                ),
            ),
          ],
        )
      ),
    );
  }

  Widget _buildTimeCard() {
    return Container(
      height: 125,
      width: 400,
      margin: EdgeInsets.all(5.0),
      decoration: BoxDecoration(
        color: Colors.black,
        border: Border.all(
          color: Colors.green,
          width: 0.5,
        ),
        borderRadius: BorderRadius.circular(7.0),
      ),
      child: Center(
        child: Text(
          'TIME OF EVENT',
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
        ),
      ),
    );
  }

  Widget _buildNoticeExpansionTile() {
    return Theme(
        data: Theme.of(context).copyWith(unselectedWidgetColor: Colors.white, accentColor: Colors.white),
        child: ExpansionTile(
            title: new Text(
              "Notice",
              style: TextStyle(
                  color: Colors.green,
                  fontSize: 16
              ),
            ),
            backgroundColor: Colors.transparent,
            children: <Widget>[
              Container(
                child: ListView.builder(
                    padding: EdgeInsets.all(0.0),
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: widget.data['notice'] != null ? widget.data['notice'].length : 0,
                    itemBuilder: (BuildContext context, int index){
                      return
                      Padding(
                        padding: EdgeInsets.only(left: 15, bottom: 10),
                        child: Text(
                          "\u2022 " + widget.data['notice'][index],
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 14
                          ),
                        )
                      );
                    }
                )
              ),
            ]
        )
    );
  }

  Widget _buildMemoExpansionTile() {
    return
      Theme(
          data: Theme.of(context).copyWith(unselectedWidgetColor: Colors.white, accentColor: Colors.white),
          child: ExpansionTile(
              title: new Text(
                "Memo",
                style: TextStyle(
                    color: Colors.green,
                    fontSize: 16
                ),
              ),
              backgroundColor: Colors.transparent,
              children: <Widget>[
                ListView.builder(
                  padding: EdgeInsets.all(0.0),
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: widget.data['memo'] != null ? widget.data['memo'].length : 0,
                  itemBuilder: (BuildContext context, int index){
                    return
                      Padding(
                          padding: EdgeInsets.only(left: 15, bottom: 10),
                          child: Text(
                            (index + 1).toString() + ". " + widget.data['memo'][index],
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14
                            ),
                          )
                      );
                  }
                )
              ]
          )
      );
  }
}

Perhaps my mistake could be from one of those objects that I have used. However, I can't figure it out even though I searched around the internet. My intention is when the expandable tiles have 'overlapped' the screen size, you would be able to scroll it all the way down.

Answer 1

Wrap the SingleChildScrollView in Expanded Widget.

You can make use of the flutter dev tools for identifying overlapping issues.

Answer 2

我简化了脚手架，然后将 SingleChildScrollView 包裹在 Flexible 中。