Flutter implement tab

Question

I'm trying to make a page design like this:

But I'm having difficulties on implementing the tab bar. When the user click on 'Detail', then the detail view is showed under the tab bar and so on. Is there any widget to use?

Answer 1

import 'package:flutter/material.dart';


class TabBarDemo extends StatelessWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tabs Demo'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: 400,
                  child: const TabBarView(
                  children: [
                    Icon(Icons.directions_car),// create image widget here using listview builder
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
              ),
                ),

                Container(
                  height: 80,
                  color: Colors.blue,
                  child: const TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),  
                      Tab(icon: Icon(Icons.directions_transit)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ],
                  ),
                ),

                Container(
                  height: 400,
                  child:  TabBarView(
                    children: [
                      Container(color: Colors.red,), // create data widgets here using listview builder
                      Container(color: Colors.green,),
                      Container(color: Colors.yellow,),
                    ],
                  ),
                ),

        ]
            ),
          ),
        ),
      ),
    );
  }
}