MediaQuery.of(context).size.width

// main.dartimport 'package:flutter/material.dart';
void main() {  runApp(const MyApp());}
class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return MaterialApp(        // Remove the debug banner        debugShowCheckedModeBanner: false,        title: '大前端之旅',        theme: ThemeData(primarySwatch: Colors.indigo),        home: const HomeScreen());  }}
class HomeScreen extends StatefulWidget {  const HomeScreen({Key? key}) : super(key: key);
  @override  _HomeScreenState createState() => _HomeScreenState();}
class _HomeScreenState extends State<HomeScreen> {  // The contents of views  // Only the content associated with the selected tab is displayed on the screen  final List<Widget> _mainContents = [    // Content for Home tab    Container(      color: Colors.yellow.shade100,      alignment: Alignment.center,      child: const Text(        'Home',        style: TextStyle(fontSize: 40),      ),    ),    // Content for Feed tab    Container(      color: Colors.purple.shade100,      alignment: Alignment.center,      child: const Text(        'Feed',        style: TextStyle(fontSize: 40),      ),    ),    // Content for Favorites tab    Container(      color: Colors.red.shade100,      alignment: Alignment.center,      child: const Text(        'Favorites',        style: TextStyle(fontSize: 40),      ),    ),    // Content for Settings tab    Container(      color: Colors.pink.shade300,      alignment: Alignment.center,      child: const Text(        'Settings',        style: TextStyle(fontSize: 40),      ),    )  ];
  // The index of the selected tab  // In the beginning, the Home tab is selected  int _selectedIndex = 0;
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('大前端之旅'),      ),      // Show the bottom tab bar if screen width < 640      bottomNavigationBar: MediaQuery.of(context).size.width < 640          ? BottomNavigationBar(              currentIndex: _selectedIndex,              unselectedItemColor: Colors.grey,              selectedItemColor: Colors.indigoAccent,              // called when one tab is selected              onTap: (int index) {                setState(() {                  _selectedIndex = index;                });              },              // bottom tab items              items: const [                  BottomNavigationBarItem(                      icon: Icon(Icons.home), label: 'Home'),                  BottomNavigationBarItem(                      icon: Icon(Icons.feed), label: 'Feed'),                  BottomNavigationBarItem(                      icon: Icon(Icons.favorite), label: 'Favorites'),                  BottomNavigationBarItem(                      icon: Icon(Icons.settings), label: 'Settings')                ])          : null,      body: Row(        mainAxisSize: MainAxisSize.max,        children: [          // Show the navigaiton rail if screen width >= 640          if (MediaQuery.of(context).size.width >= 640)            NavigationRail(              minWidth: 55.0,              selectedIndex: _selectedIndex,              // Called when one tab is selected              onDestinationSelected: (int index) {                setState(() {                  _selectedIndex = index;                });              },              labelType: NavigationRailLabelType.all,              selectedLabelTextStyle: const TextStyle(                color: Colors.amber,              ),              leading: Column(                children: const [                  SizedBox(                    height: 8,                  ),                  CircleAvatar(                    radius: 20,                    child: Icon(Icons.person),                  ),                ],              ),              unselectedLabelTextStyle: const TextStyle(),              // navigation rail items              destinations: const [                NavigationRailDestination(                    icon: Icon(Icons.home), label: Text('Home')),                NavigationRailDestination(                    icon: Icon(Icons.feed), label: Text('Feed')),                NavigationRailDestination(                    icon: Icon(Icons.favorite), label: Text('Favorites')),                NavigationRailDestination(                    icon: Icon(Icons.settings), label: Text('Settings')),              ],            ),
          // Main content          // This part is always shown          // You will see it on both small and wide screen          Expanded(child: _mainContents[_selectedIndex]),        ],      ),    );  }}

NavigationRail({  Key? key,   Color? backgroundColor,   bool extended = false,   Widget? leading,   Widget? trailing,   required List<NavigationRailDestination> destinations,   required int selectedIndex,   ValueChanged<int>? onDestinationSelected,   double? elevation,   double? groupAlignment,   NavigationRailLabelType? labelType,   TextStyle? unselectedLabelTextStyle,   TextStyle? selectedLabelTextStyle,   IconThemeData? unselectedIconTheme,   IconThemeData? selectedIconTheme,   double? minWidth,   double? minExtendedWidth,   bool? useIndicator,   Color? indicatorColor})

BottomNavigationBar({  Key? key,   required List<BottomNavigationBarItem> items,   ValueChanged<int>? onTap,   int currentIndex = 0,   double? elevation,   BottomNavigationBarType? type,   Color? fixedColor,   Color? backgroundColor,   double iconSize = 24.0,   Color? selectedItemColor,   Color? unselectedItemColor,   IconThemeData? selectedIconTheme,   IconThemeData? unselectedIconTheme,   double selectedFontSize = 14.0,   double unselectedFontSize = 12.0,   TextStyle? selectedLabelStyle,   TextStyle? unselectedLabelStyle,   bool? showSelectedLabels,   bool? showUnselectedLabels,   MouseCursor? mouseCursor,   bool? enableFeedback,   BottomNavigationBarLandscapeLayout? landscapeLayout})