Flutter Tab view in the middle of the screen

Question

I was trying to achiving something like that in the image. But when i try to do that this error is getting.

The following assertion was thrown while applying parent data.: Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

and the screen is going grey.

What i have done so far is :-

GestureDetector(
      onTap: () {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => Detailedview(id)));
      },
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5), //color of shadow
              spreadRadius: 1, //spread radius
              blurRadius: 1,
              // blurStyle: BlurStyle.normal,
              // blur radius
              offset: const Offset(0, 0),
            ),
          ],
          color: Colors.white,
          borderRadius: const BorderRadius.all(Radius.circular(15)),
        ),
        margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 5),
        width: 190.0,
        child: Stack(
          // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            //image
            Container(
              height: MediaQuery.of(context).size.height * 0.145,
              width: MediaQuery.of(context).size.width * 0.9,
              // height: MediaQuery.of(context).size.height * 0.09,
              // width: MediaQuery.of(context).size.width * 0.35,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(15)),
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: CachedNetworkImageProvider(
                        "http://192.168.20.52:8081/uploads/" + image)),
              ),
            ),
            //black shadow
            Container(
              height: MediaQuery.of(context).size.height * 0.145,
              width: double.infinity,
              // height: MediaQuery.of(context).size.height * 0.09,
              // width: MediaQuery.of(context).size.width * 0.35,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(15)),
                gradient: LinearGradient(
                    colors: [Colors.black.withOpacity(0.4), Colors.transparent],
                    begin: FractionalOffset.topCenter,
                    end: FractionalOffset.bottomCenter),
              ),
            ),
            //book mark
            GestureDetector(
              onTap: () async {
                if (bookmark == "False") {
                  await makebookmark(userid, id);
                }

                if (bookmark == "True") {
                  await deletebookmark(userid, id);
                }

                setState(() {
                  popularpackages = fetchpopularpackagebyid(userid);
                });
              },
              child: Padding(
                  padding: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.115,
                      left: MediaQuery.of(context).size.width * 0.35),
                  child: Container(
                    height: 44,
                    width: 44,
                    decoration: BoxDecoration(
                      color: Colors.grey[300]?.withOpacity(0.6),
                      borderRadius: const BorderRadius.all(Radius.circular(50)),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: Container(
                        decoration: BoxDecoration(
                          color: bookmark == "False"
                              ? Colors.white
                              : const Color(Const.secondary),
                          borderRadius:
                              const BorderRadius.all(Radius.circular(50)),
                        ),
                        child: Icon(
                          Icons.bookmark_add,
                          color: bookmark == "False"
                              ? const Color(Const.secondary)
                              : Colors.white,
                        ),
                      ),
                    ),
                  )),
            ),
            //place name
            Padding(
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * 0.16, left: 10),
              child: Text(
                package,
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: GoogleFonts.lato(
                  color: Colors.black,
                  textStyle: Theme.of(context).textTheme.headline4,
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                  fontStyle: FontStyle.normal,
                ),
              ),
            ),
            //district
            Padding(
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * 0.180, left: 10),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        const Icon(
                          Icons.location_on_outlined,
                          size: 20,
                          color: Color(Const.secondary),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: SizedBox(
                            width: MediaQuery.of(context).size.width * 0.18,
                            child: Text(
                              tourPlace,
                              overflow: TextOverflow.ellipsis,
                              // 'Kochi',
                              style: GoogleFonts.spartan(
                                color: const Color(Const.secondary),
                                textStyle:
                                    Theme.of(context).textTheme.headline4,
                                fontSize: 12,
                                fontWeight: FontWeight.w600,
                                fontStyle: FontStyle.normal,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    //price
                    Padding(
                      padding: const EdgeInsets.only(right: 15),
                      child: Text(
                        '\$ ' + rate,
                        overflow: TextOverflow.ellipsis,
                        style: GoogleFonts.spartan(
                          color: const Color(Const.secondary),
                          textStyle: Theme.of(context).textTheme.headline4,
                          fontSize: 12,
                          fontWeight: FontWeight.w400,
                          fontStyle: FontStyle.normal,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            //book now
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Booknow(id)),
                  );
                },
                child: Container(
                    height: 25,
                    width: 70,
                    decoration: const BoxDecoration(
                      color: Color(Const.secondary),
                      borderRadius: BorderRadius.all(Radius.circular(25)),
                    ),
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(0.0),
                            child: Text(
                              'Book Now',
                              style: GoogleFonts.spartan(
                                color: Colors.white,
                                textStyle:
                                    Theme.of(context).textTheme.headline4,
                                fontSize: 10,
                                fontWeight: FontWeight.w600,
                                fontStyle: FontStyle.normal,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )),
              ),
            )
          ],
        ),
      ),
    );

what exactly you want to achieve? tab? this tab style? tab in the middle? make it clear would be better — Jim, Sep 30 '21 at 05:51

Ravindra S. Patil · Accepted Answer · 2023-05-18T09:25:26.547

Try below answer hope its help to you: DefaultTabController & TabBar SingleTickerProviderStateMixin

here you use StateFulWidget With the SingleTickerProviderStateMixin like below

import 'package:flutter/material.dart';

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

  @override
  State<CustomTabBar> createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar>
    with SingleTickerProviderStateMixin {
  TabController? tabController;

  @override
  void initState() {
    tabController = TabController(length: 4, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 150,
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Your Widget if you want',
              ),
            ),
          ),
          TabBar(
            unselectedLabelColor: Colors.black,
            labelColor: Colors.red,
            tabs: const [
              Tab(
                icon: Icon(Icons.person),
              ),
              Tab(
                icon: Icon(
                  Icons.add,
                ),
              ),
              Tab(
                icon: Icon(
                  Icons.deck,
                ),
              ),
              Tab(
                icon: Icon(
                  Icons.child_care,
                ),
              ),
            ],
            controller: tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: const [
                Center(
                  child: Text(
                    'Screen 1',
                  ),
                ),
                Center(
                  child: Text(
                    'Screen 2',
                  ),
                ),
                Center(
                  child: Text(
                    'Screen 3',
                  ),
                ),
                Center(
                  child: Text(
                    'Screen 4',
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Your Result Screen->

are you able to remove the appbar above "My appbar" ? I don't want that — Alan Bosco, Sep 30 '21 at 06:29
When i did that every other widget get stick to the top? Is there any other easy way ? other that using singleticket provider — Alan Bosco, Sep 30 '21 at 07:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237662/discussion-between-alan-bosco-and-ravindra-s-patil). — Alan Bosco, Sep 30 '21 at 07:18

score 1 · Answer 2 · answered Sep 30 '21 at 05:54

You need to use the TabBar Widget.

More info here

Here is a running example

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.cloud_outlined),
              ),
              Tab(
                icon: Icon(Icons.beach_access_sharp),
              ),
              Tab(
                icon: Icon(Icons.brightness_5_sharp),
              ),
            ],
          ),
        ),
        body: const TabBarView(
          children: <Widget>[
            Center(
              child: Text("It's cloudy here"),
            ),
            Center(
              child: Text("It's rainy here"),
            ),
            Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

I tried this but what happens is it will take an appbar so there will be a space in top of the bar. — Alan Bosco, Sep 30 '21 at 06:06

Flutter Tab view in the middle of the screen

2 Answers2

Linked