Flutter: Multiple material widgets

Question

[![enter image description here][1]][1]A little bit of a beginner question, but I have been messing with it for a long time and looking around without finding an answer.

I am using Flutter framework and I am trying to run multiple Stateless widgets, a bottom navigation bar and a top appbar to hold menu and other navigation buttons. I am struggling to get both running at once and I can not find a way to run them both. At the moment, when I call home:MyBottomNavigationBar only this appears and not the other(Makes sense) But what command or solution would help me run multiple widgets? I have tried tons of different ways to use home, but nothing seems to work. My code is very simple. Just creating a Navigation bar and appbar with stf inside main.dart.

If needed I can attach the code, but hopefully my question is clear enough.

Done In Xamarin, I can have both BottomNavBar and Couple of Nav buttons at the top easily. [1]: https://i.stack.imgur.com/Q2qXg.png

BottomNavBar.dart in Widgets folder

import 'dart:io';

class MyBottomNavigationBar extends StatefulWidget
{
  @override
  MyBottomNavigationBarState createState() => MyBottomNavigationBarState();
}

class MyBottomNavigationBarState extends State<MyBottomNavigationBar>
{
  int _currentIndex = 0;
  final List <Widget> _children =
  [
    HomePage(),
    ExplorePage(),
    ProgressPage(),
    ChallengesPage(),
    ProfilePage(),
  ];

  void onTappedBar(int index)
  {
    setState((){
      _currentIndex=index;
    });
  }

  @override
  Widget build(BuildContext context)
  {
    return new Scaffold
      (
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar
        (

        onTap: onTappedBar,
        currentIndex: _currentIndex,

        items:
        [

          BottomNavigationBarItem
            (
            backgroundColor: Colors.pinkAccent,
            icon: new Icon(Icons.home,
                color: Colors.black),
            label: 'Feed',
            //activeBackgroundColor: Colors.red, // this is the change
          ),

main.dart

void main() async
{
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

/// This is the main application widget.
class MyApp extends StatelessWidget {

  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context)
  {
    MyBottomNavigationBar();
  }
      
    return MaterialApp(
      title: _title,
      theme: ThemeData(
        primarySwatch: Colors.blue,

      ),
        home:HomePage()
        );
  }
}

And then I have a widget for a couple of buttons at the top appbar, but I can only run either BottomNavBar or The AppBar buttons. I would like to have them both working at the same time.

Answer 1

please put the code here, it would be helpful. I personally didn't understand what you're trying to achieve. every stateless/stateful has one build method which returns a widget (that has its own build method). However, as some widgets can have more than one child (row,column,stack), you can use your pre-built layout composition and then mount it to the widget tree. Or, simply use your custom layout by extending CustomMultiChildLayout, you can also use "Overlay"-ing, to paint directly on the canvas based on an event or a state. ||||||||||||

new answer:

I tried to reproduced the image, basically you need to use scaffold's appBar and bottomNavigationBar properties. appbar is extending PreferredSizedWidget so you can easily create your own.

main.dart

 void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    MyBottomNavigationBar();
    return MaterialApp(
      title: _title,
      home: HomePage(),
    );
  }
}

home_page.dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter version"),
        actions: [
          IconButton(icon: Icon(Icons.menu), onPressed: () {}),
          IconButton(icon: Icon(Icons.account_circle), onPressed: () {}),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Colors.pinkAccent,
            icon: new Icon(Icons.home, color: Colors.black),
            label: 'Feed',
            //activeBackgroundColor: Colors.red, // this is the change
          ),
          BottomNavigationBarItem(
            backgroundColor: Colors.pinkAccent,
            icon: new Icon(Icons.home, color: Colors.black),
            label: 'Feed',
            //activeBackgroundColor: Colors.red, // this is the change
          ),
        ],
      ),
      body: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height/7,
            color: Colors.blue,
            child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 41,color: Colors.white),),),
          ),
        ],
      ),
    );
  }
}

assuming you want to create your layout from scratch and don't want to use the scaffold's properties. the code blow is the same layout with stack, I didn't make it beautiful though, it just shows the layout without refactoring any widget.

code for home_page.dart (main.dart is the same as above)

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Stack(
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height/12,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  boxShadow: [
                    BoxShadow(color: Colors.black54,blurRadius: 2,spreadRadius: .1,offset: Offset(0, 2)),
                  ],
                ),

                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(

                      children: [
                        Padding(
                          padding: const EdgeInsets.all(18.0),
                          child: Text("just stack",style: TextStyle(fontSize: 21,color: Colors.white),),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
                      ],
                    ),


                  ],
                ),
              ),
              Positioned(
                top: MediaQuery.of(context).size.height/12+1,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height/10,
                  color: Colors.blue,
                  child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 31,color: Colors.white),)),
                ),
              ),
              Positioned(
                bottom:0,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height/12,
                  color: Colors.blue,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Column(
                        children: [
                          IconButton(icon: Icon(Icons.home,size: 32,), onPressed: (){}),
                          Text("home"),
                        ],
                      ),
                      IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),
                      IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}