Flutter difference between TabBar and TabBarView

Question

My question is about the difference between TabBar and TabBarView . I can't tell any difference in looks, but what are the functions of both of them?

Answer 1

TabBar is used to create the tabs themselves, while TabBarView is used to create each bar content.

Look at the example in the docs

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

From the image the TabBar is the bottom of the blue bar (AppBar), and the TabBar view is the white page under the bar. Also the whole application is wrapped with DefaultTabController