如何修复“使用不包含 MediaQuery 的上下文调用 MediaQuery.of()”的错误？

Question

I don't know why this error comes out when I use "Tab" like below. Whenever I tried to build the app the error screen comes out. Please let me know how to fix it.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tab'),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.tag_faces),),
              Tab(text: 'menu',),
              Tab(icon: Icon(Icons.info),text: 'menu',),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Container(color: Colors.purple,),
            Container(color: Colors.purple,),
            Container(color: Colors.purple,),
          ],
        ),
      ),
    );
  }
}

Answer 1

You need to wrap DefaultTabController in MaterialApp. If you visit the Scaffold class then you can see that it needs MediaQuery. MediaQuery is defined in WidgetsApp class. Since the MaterialApp inherits from WidgetsApp hence wrapping our widget tree will allow the Scaffold to access MediaQuery class.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tab'),
            bottom: TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.tag_faces),),
                Tab(text: 'menu',),
                Tab(icon: Icon(Icons.info),text: 'menu',),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Container(color: Colors.purple,),
              Container(color: Colors.purple,),
              Container(color: Colors.purple,),
            ],
          ),
        ),
      ),
    );
  }
}