dibaloke
1/13/2019 - 8:57 PM

Flutter Tabs

import 'package:flutter/material.dart';
import 'first_page.dart' as firstpage;
import 'second_page.dart' as secondpage;

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
  TabController controller;
  @override
  void initState(){
    super.initState();
    controller=TabController(vsync: this,length: 2);
  }
  @override
  void dispose(){
   controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tab"),
        backgroundColor: Colors.teal,
        bottom: TabBar(
          controller: controller,
          tabs: <Widget>[
            Tab(
              text: "Bike",
              icon: Icon(Icons.directions_bike),
            ),
            Tab(
              text: "Car",
              icon: Icon(Icons.directions_car),
            ),
          ],
        ),
      ),
      body:TabBarView(
        controller: controller,
        children: <Widget>[
          firstpage.FirstPage(),
          secondpage.SecondPage(),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Icon(Icons.directions_bike)),
    );
  }
}
import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Icon(Icons.directions_car)
      ),
    );
  }
}