本文共 4368 字，大约阅读时间需要 14 分钟。

报错：

flutter MediaQuery.of(context) called with a context that does not contain a MediaQuery.

原因：

Scaffold必须放在MaterialApp里面，否则会报错

正确示例：

import 'package:flutter/material.dart';main() => runApp(MyApp());//MaterialApp ： 将根布局换成一个 StatelessWidget//Scaffold ： 必须放在MaterialApp里面class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: "Material",      home: LearnMaterial(),    );  }}class LearnMaterial extends StatefulWidget {  @override  State
   
     createState() {    return _LearnMaterial();  }}class _LearnMaterial extends State
    
      {  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          title: Text("material"),        ),        body: Column(          children: 
     
      [            Center(              child: Material(                color: Colors.blueAccent,                shape: BeveledRectangleBorder(                  //斜角矩形边框                  side: BorderSide(                    width: 1.0,                    color: Colors.blueAccent,                    style: BorderStyle.none,                  ),                  borderRadius: BorderRadius.circular(50.0),                ),                child: Container(                  padding: EdgeInsets.all(20.0),                  child: Text('斜角矩形边框'),                ),              ),            ),            Center(              child: Material(                color: Colors.blueAccent,                shape: BeveledRectangleBorder(                  //斜角矩形边框                  side: BorderSide(                    width: 1.0,                    color: Colors.blueAccent,                    style: BorderStyle.none,                  ),                  borderRadius: BorderRadius.circular(10.0),                ),                child: Container(                  padding: EdgeInsets.all(20.0),                  child: Text('斜角矩形边框'),                ),              ),            ),            Center(              child: Material(                color: Colors.blueAccent,                shape: BorderDirectional(                    start: BorderSide(                      color: Colors.yellow,                      width: 10.0,                    ),                    top: BorderSide(                      color: Colors.deepOrange,                      width: 10.0,                    ),                    end: BorderSide(                      color: Colors.black87,                      width: 10.0,                    ),                    bottom: BorderSide(                      color: Colors.purpleAccent,                      width: 10.0,                    )),                child: Container(                  padding: EdgeInsets.all(30.0),                  child: Text('多彩边框'),                ),              ),            ),            Center(              child: Material(                color: Colors.blueAccent,                shape: CircleBorder(                    side: BorderSide(                  color: Colors.yellow,                  width: 10.0,                )),                child: Container(                  padding: EdgeInsets.all(50.0),                  child: Text('圆形边框'),                ),              ),            ),            Center(              child: Material(                color: Colors.blueAccent,                shape: RoundedRectangleBorder(                  side: BorderSide(                    color: Colors.purpleAccent,                    width: 5.0,                  ),                  borderRadius: BorderRadius.circular(                      20.0), //如果[borderRadius]被指定，那么[type]属性不能是 [MaterialType.circle]。                ),                child: Container(                  padding: EdgeInsets.all(30.0),                  child: Text('圆角矩形'),                ),              ),            ),            Center(              child: Material(                color: Colors.purpleAccent,                elevation: 10.0,                shadowColor: Colors.yellow,                shape: StadiumBorder(                    side: BorderSide(                  color: Colors.brown,                  width: 5.0,                )),                child: Container(                  padding: EdgeInsets.all(30.0),                  child: Text('体育场形状'),                ),              ),            )          ],        ));  }}
     
    
   

效果图：

转载地址：http://dpnii.baihongyu.com/