skip to Main Content

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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(),
            );
          }
        }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search