scrolling_navbar 0.0.4

A simple and easy to implement feature

Scrolling Navbar

A package that creates a scrolling navbar, useful for landing pages and cool people

Basic Case

For a basic case, supply this widget with an AppBar and a list of children widgets (just like a row or column)

import 'package:flutter/material.dart';

import 'package:scrolling_navbar/scrolling_navbar.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ScrollingNavbar(
          // This is just a normal AppBar
          appBar: AppBar(),
          // The Scrolling Navbar will make links for each widget to scroll to
          children: [
            MyPage1Widget(),
            MyPage2Widget(),
            MyPage3Widget(),
          ],
        ),
      ),
    );
  }
}

Customize

To change the name of the links, supply a list of strings into the header variable

ScrollingNavbar(
    // This is just a normal AppBar
    appBar: AppBar(),
    // This will change the names of the titles
   headings: [
    'Page 1',
    'Page 2',
    'Page 3',
    ],
    // The Scrolling Navbar will make links for each widget to scroll to
    children: [
    MyPage1Widget(),
    MyPage2Widget(),
    MyPage3Widget(),
    ],
),
     

The Scrolling Navbar takes an AppBar() as a parameter so that you can customize it to your hearts content

ScrollingNavbar(
    appBar: AppBar(
    // Increase the height
    toolbarHeight: 70,

    // Add that snazzy logo
    leading: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.network(
            'https://d3mds3ychln71.cloudfront.net/img/[e-mail]'),
    ),

    // Fatten it up
    leadingWidth: 200,

    // Change the background color
    backgroundColor: Colors.red,

    // Style the links
    titleTextStyle: TextStyle(fontSize: 24, color: Colors.blue[900]),

    // Throw some buttons after the fact
    actions: <Widget>[
        IconButton(
        icon: Icon(Icons.shopping_cart),
        tooltip: 'Open shopping cart',
        onPressed: () {
            // handle the press
        },
        ),
    ],
    ),
    headings: [
    'Page 1',
    'Page 2',
    'Page 3',
    ],
    // The Scrolling Navbar will make links for each widget to scroll to
    children: [
    MyPage1Widget(),
    MyPage2Widget(),
    MyPage3Widget(),
    ],
),