How to make top navigation bar in Flutter?

pew 0
Viewed 31

I'm developing a Discord bot with many fancy features, and want to make a web dashboard for users. First thing that came up in my mind was navigation bar (at top), to navigate between "Home", "Features", "Dashboard" etc., but as far as my googling and docs reading "skills" are, i couldn't find anything except NavigationBar (which looks very mobile-ish and 'll confuse desktop users) and Scaffold's bottomNavigationBar (which is, well, bottom). I need just the "default" navbar present on almost any website, to mention a few: flutter.dev, yahoo.com, MEE6 (another Discord bot), even the website you're currently on - StackOverflow.

Any help is appreciated!

(Also, if you're wondering why i am using flutter for such a simple thing - i want to eventually make a mobile app too, for nicer integration with device)

flutter-web dart flutter
2 Answers

You can use the appBar property of the Scaffold Widget. Instead of providing an AppBar, you provide a PreferedSize-Widget and your Custom Dashboard as a child of PreferedSize, which basically takes any widget. For more information on PreferedSize and an example, check the following part of Flutter docs: https://api.flutter.dev/flutter/widgets/PreferredSize-class.html

Andreas Herzinger0

You can use TabBar class

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

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

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Widget'),
        bottom: TabBar(
          controller: _tabController,
          tabs: const <Widget>[
            Tab(
              icon: Icon(Icons.cloud_outlined),
            ),
            Tab(
              icon: Icon(Icons.beach_access_sharp),
            ),
            Tab(
              icon: Icon(Icons.brightness_5_sharp),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const <Widget>[
          Center(
            child: Text("It's cloudy here"),
          ),
          Center(
            child: Text("It's rainy here"),
          ),
          Center(
            child: Text("It's sunny here"),
          ),
        ],
      ),
    );
  }
}
Cristiano Haas0
Related