flutter-tutorial

Flutter Tabbar

The tabs are mostly used for navigating on mobile devices. Tabs are styled differently on different operating systems. For example, on Android devices, it is at the top of the screen, whereas on iOS devices, it is towards the bottom.

Working with tabs is a prevalent technique in Material Design-compliant Android and iOS applications. Flutter makes it simple to construct a tabbed layout. Create a TabBar and TabBarView and attach them to the TabController to add tabs to the project. The controller will synchronise both so that we may achieve the desired behaviour.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Learn Code Zone'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.contacts), text: "Tab 1"),
                Tab(icon: Icon(Icons.camera_alt), text: "Tab 2")
              ],
            ),
          ),
          body: TabBarView(
            children: [
              FirstScreen(),
              SecondScreen(),
            ],
          ),
        ),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: Text(
        'It is a contact tab, which is responsible for displaying the contacts stored in your mobile',
        style: TextStyle(fontSize: 32.0),
      )),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          'It is a second layout tab, which is responsible for taking pictures from your mobile.',
          style: TextStyle(fontSize: 35.0),
        ),
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.