Flutter Question posted in
The official Flutter documentation can be found here.

Flutter TabBar custom view

I need to make the following tab bar (Upcoming/Past) view but not able to achieve it.

Here is the code:

import 'package:cali_clinic/helpers/app_exports/app_exports.dart';
import 'package:cali_clinic/reuseables/widgets/app_bar/common_app_bars.dart';
import 'package:cali_clinic/screens/appointment_screen/model/apponitment_screen_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_svg/svg.dart';

import '../../../helpers/constants/brand_color.dart';
import '../../../helpers/constants/image_contants.dart';
import '../../../reuseables/widgets/text_fields.dart/search_appointment_field.dart';
import '../../../reuseables/widgets/text_fields.dart/search_text_field.dart';
import '../../../reuseables/widgets/text_widget/display_text.dart';
import '../vm/appointment_screen_vm.dart';

class AppointmentScreen extends StatefulWidget {
  AppointmentScreen({super.key});

  @override
  State<AppointmentScreen> createState() => _AppointmentScreenState();
}

class _AppointmentScreenState extends State<AppointmentScreen>
    with SingleTickerProviderStateMixin {
  late TabController tabController;
  Color upComing = const Color(0xFF00509D);

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

  late final AppointmentScreenVM _apppointmentScreenVM = AppointmentScreenVM();

  @override
  Widget build(BuildContext context) {
    double fem = MediaQuery.of(context).size.width / 428;
    double ffem = fem * 0.97;

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            SizedBox(
                height: 60 * ffem,
                child: Row(
                  children: [
                    Expanded(
                      child: Container(
                        decoration: ShapeDecoration(
                          color: ColorConstant.blackColor,
                          shape: RoundedRectangleBorder(
                            side: const BorderSide(
                                width: 1, color: Color(0xFFF4F4F5)),
                            borderRadius: BorderRadius.circular(8),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        color: ColorConstant.blueGray50,
                      ),
                    ),
                  ],
                )),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 10,
                    child: SizedBox(
                        height: 36 * ffem,
                        width: 300,
                        child: searchAppointmentField()),
                  ),
                  const Expanded(flex: 1, child: SizedBox()),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 36 * ffem,
                      width: 36 * ffem,
                      padding: const EdgeInsets.all(10.0),
                      decoration: BoxDecoration(
                        color: ColorConstant.gray50, // Background color
                        borderRadius: BorderRadius.circular(
                            10.0), // Optional: border radius
                      ),
                      child: SvgPicture.asset(
                        ImageConstant.filterSvg,
                      ),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SvgPicture.asset(
                      ImageConstant.emptySvg,
                    ),
                    SizedBox(
                      height: 16 * ffem,
                    ),
                    const DisplayText(
                      text: 'No Data  Found',
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your FAB onPressed functionality here
        },
        shape: const CircleBorder(), // Make the FAB circular

        backgroundColor: ColorConstant.darkBlue,
        child: const Icon(
          Icons.add,
          color: ColorConstant.whiteColor,
        ),
      ),
    );
  }
}

This is the view I want to achieve

This I where I am currently

Tags:

2

Answers


  1. 0

    Try below code hope its help to you. I have paste Only UI Code that includes Tab bar and UI.

    Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: [
        Container(
          height: 45,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(
              color: Color(0xFFF4F4F5),
            ),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: TabBar(
              controller: _tabController,
              indicator: BoxDecoration(
                color: Color(0xFF00509d),
              ),
              indicatorSize: TabBarIndicatorSize.tab,
              labelColor: Colors.white,
              dividerColor: Colors.transparent,
              unselectedLabelColor: Colors.black,
              tabs: [
                Tab(
                  text: 'Upcoming',
                ),
                Tab(
                  text: 'Past',
                ),
              ],
            ),
          ),
        ),
        // tab bar view here
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              // first tab bar view widget
              Center(
                child: Text(
                  'Upcoming Tab',
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),

              // second tab bar view widget
              Center(
                child: Text(
                  'Past Tab',
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),

    UI: enter image description here

    Login or Signup to reply.
  2. 0

    Try this code, it think it’s close enough for what you need. I have also made tab color transition animation when swiping tabs.

    class _AppointmentScreenState extends State<AppointmentScreen> with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    tabController =
        TabController(length: 2, vsync: this, animationDuration: Duration.zero);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double fem = MediaQuery.of(context).size.width / 428;
    double ffem = fem * 0.97;
    const activeColor = Color(0xFF00509d);

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(10),
              child: ClipRRect(
                borderRadius: const BorderRadius.all(Radius.elliptical(25, 12)),
                child: SizedBox(
                  height: 60 * ffem,
                  child: TabBar(
                    padding: EdgeInsets.zero,
                    controller: tabController,
                    labelPadding: EdgeInsets.zero,
                    labelColor: Colors.white,
                    unselectedLabelColor: Colors.grey,
                    indicatorColor: Colors.transparent,
                    dividerHeight: 0,
                    tabs: [
                      // first tab
                      AnimatedBuilder(
                        animation: tabController.animation!,
                        builder: (_, __) {
                          return Container(
                            width: double.infinity,
                            color: Color.lerp(
                              activeColor,
                              activeColor.withOpacity(.05),
                              tabController.animation!.value,
                            ),
                            child: const Tab(
                              iconMargin: EdgeInsets.zero,
                              text: 'Upcoming',
                            ),
                          );
                        },
                      ),
                      // second tab
                      AnimatedBuilder(
                        animation: tabController.animation!,
                        builder: (_, __) {
                          return Container(
                            width: double.infinity,
                            color: Color.lerp(
                              activeColor.withOpacity(.05),
                              activeColor,
                              tabController.animation!.value,
                            ),
                            child: const Tab(
                              iconMargin: EdgeInsets.zero,
                              text: 'Past',
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: SizedBox(
                height: 36 * ffem,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    // search field
                    Expanded(
                      flex: 10,
                      child: TextField(
                        decoration: InputDecoration(
                          prefixIcon: const Icon(
                            Icons.search,
                            color: Colors.grey,
                          ),
                          hintText: 'Search a patient and health issue',
                          fillColor: activeColor.withOpacity(.05),
                          filled: true,
                          hintStyle: const TextStyle(
                            fontSize: 14,
                            color: Colors.grey,
                            fontWeight: FontWeight.normal,
                          ),
                          border: const UnderlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 15),
                    // filter button
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: activeColor.withOpacity(0.05),
                        child: IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.filter),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: const [
                  // first tab body
                  Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.folder_copy,
                          color: activeColor,
                          size: 40,
                        ),
                        Text('No Upcoming Data Found'),
                      ],
                    ),
                  ),
                  // second tab body
                  Center(child: Text('Past Data here...')),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your FAB onPressed functionality here
        },
        shape: const CircleBorder(), // Make the FAB circular
        backgroundColor: activeColor,
        child: const Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    );
  }
}

    UI result

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search