即使在MaterialApp

时间：2020-08-13 22:58:04

标签： flutter

在尝试将Container扩展到屏幕的全部可用宽度和高度时，我不断收到此错误。使我感到压力和困惑的是它位于Scaffold内，位于MaterialApp内，但仍然抛出此愚蠢错误，我现在该怎么办？请帮忙。

为什么它们使仅获得屏幕尺寸或仅将容器的宽度扩展100％如此困难？我几个小时以来一直在尝试解决此问题，但根本没有解决方案。

这是错误：

enter image description here

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[800],
        body: SafeArea(
            child: Column(
          children: <Widget>[
            Container(
              child: Text('asdfasdfsfd'),
            ),

            
            Expanded(
              child: Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  child: Image.asset('images/cover.jpg')),
            ),
            SizedBox(
              height: 5,
            ),
            // 
            Container(
              child: Center(child: Text('Folder Name')),
            ),
            SizedBox(
              height: 5,
            ),

            Container(
              child: Slider.adaptive(
                value: 0,
                onChanged: null,
                min: 0,
                max: 5,
                label: '5',
              ),
            ),
            // 
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 25,
                    child: Center(child: Text('08:16')),
                  ),
                  Container(
                      width: 60,
                      height: 25,
                      child: Center(child: Text('-06:44'))),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            // Bottom Third container
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            // Bottom Second container start
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    // Previous Button
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    // Play Button
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    // Next Button
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            // Bottom container start
            Container(
              // 3rd Container
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            )
          ],
        )),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分：1)

从技术上讲，MaterialApp在树中查询的上方，而它当前访问的BuildContext context在其上方。

您需要获取BuildContext下面的MaterialApp。有多种方法可以完成。

  1. 您可以将MaterialApp从MyApp小部件中移出：
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));//`MaterialApp` moved here
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {//Now this context is below the `MaterialApp`
    return Scaffold(
        backgroundColor: Colors.grey[800],
        body: SafeArea(
            child: Column(
          children: <Widget>[
            Container(
              child: Text('asdfasdfsfd'),
            ),

            Expanded(
              child: Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  child: Image.asset('images/cover.jpg')),
            ),
   ...
  1. 使用Builder获得不同的BuildContext 
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(//Use `Builder` below `MaterialApp` but above where you need access to proper context
        builder: (context) {//Different context provided here
          return Scaffold(
            backgroundColor: Colors.grey[800],
            body: SafeArea(
              child: Column(
                children: <Widget>[
                  Container(
                    child: Text('asdfasdfsfd'),
                  ),

            
            Expanded(
              child: Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  child: Image.asset('images/cover.jpg')),
            ),
相关问题
最新问题