By AkshatApp.com | Blog Admin

🗓️  Dec 28, 2019

List of Code Samples

• BottomNavigationBar Class - [Dartpad]
• Tabs - [Dartpad]
• Drawer Widget - [Dartpad]
• Multi-Color Text - [Dartpad]

Flutter Bottom Navigation Bar Demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Bottom Navigation Bar Demo',
      theme: ThemeData(primarySwatch: Colors.purple),
      home: MyHomePage(),
    );
  }
}

// Page 1 - Create Product

class CreateTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.edit,
          color: Color(0xFFD50000),
        ),
      ),
    );
  }
}

// Page 2 - Manage Products

class ManageTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.view_list,
          color: Colors.pink,
        ),
      ),
    );
  }
}

// Page 3 - Product Info

class InfoTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.info,
          color: Colors.blue,
        ),
      ),
    );
  }
}

// BottomNavigationBar - Stateful Widget

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0:
        return CreateTabPage();

      case 1:
        return ManageTabPage();

      case 2:
        return InfoTabPage();
        break;
      default:
        return InfoTabPage();
    }
  }

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bottom Navigation Bar Demo'),
      ),
      body: SafeArea(
        child: callPage(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              title: Text("Create Product"),
              activeIcon: Icon(
                Icons.edit,
                color: Color(0xFFD50000),
              ),
              icon: Icon(
                Icons.edit,
                color: Color(0xFFC0C0C0),
              )),
          BottomNavigationBarItem(
              title: Text("Manage Products"),
              activeIcon: Icon(
                Icons.view_list,
                color: Colors.pink,
              ),
              icon: Icon(
                Icons.view_list,
                color: Color(0xFFC0C0C0),
              )),
          BottomNavigationBarItem(
              title: Text("Product Info"),
              activeIcon: Icon(
                Icons.info,
                color: Colors.blue,
              ),
              icon: Icon(
                Icons.info,
                color: Color(0xFFC0C0C0),
              ))
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.black,
        onTap: _onItemTapped,
      ),
    );
  }
}

Flutter Tabs Demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Tabs Demo',
      theme: ThemeData(primarySwatch: Colors.purple),
      home: MyHomePage(),
    );
  }
}

// Page 1 - Create Product

class CreateTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.edit,
          color: Color(0xFFD50000),
        ),
      ),
    );
  }
}

// Page 2 - Manage Products

class ManageTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.view_list,
          color: Colors.pink,
        ),
      ),
    );
  }
}

// Page 3 - Product Info

class InfoTabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(
          Icons.info,
          color: Colors.blue,
        ),
      ),
    );
  }
}

//DefaultTabController Example

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Tabs Demo'),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.edit), text: "Create Product"),
              Tab(icon: Icon(Icons.view_list), text: "Manage Product"),
              Tab(icon: Icon(Icons.info), text: "Product Info")
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[CreateTabPage(), ManageTabPage(), InfoTabPage()],
        ),
      ),
    );
  }
}

Flutter Drawer Demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Drawer Demo',
      theme: ThemeData(primarySwatch: Colors.purple),
      routes: {
        '/': (BuildContext context) => MyHomePage(),
        '/login': (BuildContext context) => LoginPage(),
        '/settings': (BuildContext context) => SettingsPage(),
        '/about': (BuildContext context) => AboutPage(),
        '/profile': (BuildContext context) => ProfilePage(),
      },
      onUnknownRoute: (RouteSettings settings) {
        return MaterialPageRoute(
            builder: (BuildContext context) => MyHomePage());
      },
    );
  }
}

// Page 1 - About Page

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About Page'),
      ),
      body: Center(
        child: Icon(
          Icons.info,
          color: Colors.blue,
          size: 50.0,
        ),
      ),
    );
  }
}

// Page 2 - Settings Page

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Page'),
      ),
      body: Center(
        child: Icon(
          Icons.settings,
          color: Colors.black.withOpacity(0.7),
          size: 50.0,
        ),
      ),
    );
  }
}

// Page 3 - Login Page

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Page'),
      ),
      body: Center(
          child: RaisedButton(
        child: Text('LOGIN'),
        onPressed: () {
          Navigator.pushReplacementNamed(context, '/');
        },
      )),
    );
  }
}

// Page 4 - Profile Page

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Page'),
      ),
      body: Center(
        child: Icon(
          Icons.person_outline,
          color: Colors.black,
          size: 50.0,
        ),
      ),
    );
  }
}

// Page 5 - Home Page

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: AppDrawer(),
        appBar: AppBar(
          title: Text('Flutter Drawer Demo'),
        ),
        body: Center(
          child: Icon(
            Icons.home,
            color: Colors.purple,
            size: 50.0,
          ),
        ));
  }
}

// Drawer

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          UserAccountsDrawerHeader(
            arrowColor: Colors.black,
            decoration: BoxDecoration(color: Colors.transparent),
            onDetailsPressed: () {
              Navigator.pushNamed(context, '/profile');
            },
            accountName: Text('AkshatApp',
                style: TextStyle(
                  color: Colors.black.withOpacity(0.7),
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                )),
            accountEmail: Text('akshatapp.com',
                style: TextStyle(
                  color: Colors.black.withOpacity(0.7),
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold,
                )),
            currentAccountPicture: CircleAvatar(
              child: Icon(
                Icons.person,
                size: 50.0,
              ),
            ),
            otherAccountsPictures: <Widget>[
              CircleAvatar(
                child: Icon(Icons.person_outline),
              ),
            ],
          ),
          Container(
            padding: EdgeInsets.all(15.0),
            child: Text(
              'Flutter Drawer Widget',
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.black.withOpacity(0.7),
              ),
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.info_outline,
              color: Colors.black.withOpacity(0.7),
            ),
            title: Text(
              'ABOUT',
              style: TextStyle(
                color: Colors.black.withOpacity(0.7),
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            onTap: () {
              Navigator.pushNamed(context, '/about');
            },
          ),
          ListTile(
            leading: Icon(
              Icons.settings,
              color: Colors.black.withOpacity(0.7),
            ),
            title: Text(
              'SETTINGS',
              style: TextStyle(
                color: Colors.black.withOpacity(0.7),
                fontWeight: FontWeight.bold,
                fontSize: 14.0,
              ),
            ),
            onTap: () {
              Navigator.pushNamed(context, '/settings');
            },
          ),
          ListTile(
            leading: Icon(
              Icons.exit_to_app,
              color: Color(0xFFD50000),
            ),
            title: Text(
              'LOGOUT',
              style: TextStyle(
                color: Color(0xFFD50000),
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            onTap: () {
              Navigator.pushReplacementNamed(context, '/login');
            },
          ),
        ],
      ),
    );
  }
}

Flutter Multi-Color Text Demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Multi-Color Text Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('Flutter Multi-Color Text Demo'),
        ),
        body: Center(child: RichText(text: myText)),
    );
  }
}

final TextSpan myText = TextSpan(
  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
  children: [
    TextSpan(
      text: 'Flutter',
      style: TextStyle(
        color: Color(0xFFD50000),
      ),
    ),
    TextSpan(
      text: 'Multi-Color',
      style: TextStyle(
        color: Color(0xFF00AF19),
      ),
    ),
    TextSpan(
      text: 'Text',
      style: TextStyle(
        color: Color(0xFF0D47A1),
      ),
    ),
  ],
);

Frequently Asked Questions

This page provides links to interactive Dartpad samples for `BottomNavigationBar`, `Tabs`, `Drawer`, and `Multi-Color Text`.

You can use the `Drawer` widget within the `drawer` property of a `Scaffold`. Check the 'Flutter Drawer Demo' section for a complete code example.

Yes, you can use the `Text.rich` constructor with `TextSpan` objects to apply different styles (like colors) to different parts of the text.

Dartpad is an open-source tool that lets you play with the Dart language and Flutter frameworks in any modern browser, without having to install anything.

• flutter

Share This Post

Enjoyed this article?

Get notified when we publish new guides and tutorials. No spam, unsubscribe anytime.

📬 Newsletter coming soon — stay tuned!

The information contained on this blog is for academic and educational purposes only. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. The materials (images, logos, content) contained in this web site are protected by applicable copyright and trademark law.

Join our newsletter!

Get the latest developer guides, tutorials, and tips delivered straight to your inbox.

📬 Coming Soon