How to build tab bar middle of screen in flutter?

Question

Except for the app bar and bottom bar, everything is scrollable. Tab view will have a list with > 50 items with images and heavy data. So full page should be optimized. Also, it should have a ghost loader for all items.

I have difficulty using multiple list view or slivers, tab indicators and selections.

appreciate it if you provide a dart pad link.

Answer 1

Below I have given code for your needs . Just build your custom widget in itembuilder (50 items which you need)

 import 'package:flutter/material.dart';

 class sampleWidget extends StatefulWidget {
 const sampleWidget({Key? key}) : super(key: key);

 @override
State<sampleWidget> createState() => _sampleWidgetState();
 }

class _sampleWidgetState extends State<sampleWidget> {
@override
Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: Text("Scrollabel page"),
  ),
  body: DefaultTabController(
    length: 2,
    child: Column(
      children: [
        Container(
          height: 40,
          width: double.infinity,
          color: Colors.pink[50],
          child: Center(child: Text("TITLE")),
        ),
        TabBar(
          tabs: [
            Container(
              height: 30,
              child: Center(
                child: Text(
                  "1st  tab",
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
            Center(
              child: Text(
                "2 nd tab",
                style: TextStyle(color: Colors.black),
              ),
            ),
          ],
        ),
        Expanded(
          child: TabBarView(
            children: [
              ListView.builder(
                  itemCount: 10, itemBuilder: "your item builder"),
              ListView.builder(
                  itemCount: 10, itemBuilder: "your item builder"),
            ],
          ),
        )
      ],
    ),
  ),
  bottomNavigationBar: Container(
    height: 50,
    color: Colors.blue[50],
    ),
  );
 }
}

The output is as below. Hope this helps . Refer the link if you have further doubt. enter link description here