I'm starting out and trying to create a simple application layout with a side menuMy code:

    import 'package:flutter/material.dart';
    import 'package:flutter/foundation.dart';

    import 'package:side_navigation/side_navigation.dart';

    void main() {
      runApp(const MainView());
    }

    class MainView extends StatefulWidget {
      const MainView({Key? key}) : super(key: key);

      @override
      _MainViewState createState() => _MainViewState();
    }

    class _MainViewState extends State<MainView> {
      List<Widget> views = const [
        Center(
          child: Text('Dashboard'),
        ),
        Center(
          child: Text('Account'),
        ),
        Center(
          child: Text('Settings'),
        ),
      ];
      int selectedIndex = 0;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Row(
            children: [
              SideNavigationBar(
                selectedIndex: selectedIndex,
                items: const [
                  SideNavigationBarItem(
                    icon: Icons.dashboard,
                    label: 'Dashboard',
                  ),
                  SideNavigationBarItem(
                    icon: Icons.person,
                    label: 'Account',
                  ),
                  SideNavigationBarItem(
                    icon: Icons.settings,
                    label: 'Settings',
                  ),
                ],
                onTap: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                // Change the background color and disabled header/footer dividers
                // Make use of standard() constructor for other themes
                theme: SideNavigationBarTheme(
                  backgroundColor: Colors.grey,
                  togglerTheme: SideNavigationBarTogglerTheme.standard(),
                  itemTheme: SideNavigationBarItemTheme.standard(),
                  dividerTheme: SideNavigationBarDividerTheme.standard(),
                ),
              ),
              Expanded(
                child: views.elementAt(selectedIndex),
              )
            ],
          ),
        );
      }
    }

Source: https://pub.dev/packages/side_navigation#getting-started

Response: Red screen with no media query widget ancestor found....

I'm just starting to learn but I'm stuck on this

I tried different return types but it didn't help

CodePudding user response：

Create a StatelessWidget which returns a MaterialApp, with your MainView widget as a children.

Like this:

class MyApp extends StatelessWidget{
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainView(),
    );
  }
}

And then you use runApp(MyApp()), you always need a MaterialApp or CupertinoApp widget to run your application. They configure several stuff for you.

CodePudding user response：

if MainView() is your root class then you are missing MaterialApp create a StatelessWidget or StatefulWiget and return a Material App

example:

     class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
        @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
          ),
          home: MainView(),
        );
      }
    }

CodePudding user response：

Wrap the label attribut with a Text widget

 SideNavigationBarItem(
   icon: Icons.person,
   label: Text('Account'),
 )