flutter Material示例与MediaQuery.of(context) called with a context that does not contain a MediaQuery.
报错：
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('体育场形状'),
),
),
)
],
));
}
}
效果图：
