Tabs are stacked in screen.

[HeinKoZin]

Bug Report

Description

![Uploading photo_2024-08-28_12-50-03.jpg…]()

Steps to Reproduce

1. [Outline the steps to reproduce the bug. Be specific and provide any necessary context or prerequisites.]
2. [Add additional steps if necessary.]

Expected Behavior

Tabs are show normally in screen.

Actual Behavior

Tabs are stacked in screen

Additional Information

[Provide any additional information that may be helpful in understanding and reproducing the issue.]

Code Example

[Provide a minimal, complete, and verifiable example that reproduces the issue. Use code blocks to preserve the formatting.]

import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:money_rise/presentation/providers/topup_controller.dart';
import 'package:money_rise/utils/async_value_extension.dart';
import 'package:money_rise/utils/context_extension.dart';

import '../../model/package_resp.dart';
import '../../utils/app_color.dart';
import '../../utils/app_theme.dart';
import '../../utils/validate.dart';
import 'show_data_topup_bottomsheet.dart';

final showAllPackageProvider = StateProvider<bool>((ref) => false);
final selectedTypeProvider = StateProvider.autoDispose<String?>((ref) => null);

class TopUpDataWidget extends ConsumerWidget {
  const TopUpDataWidget({
    super.key,
    required this.formKey,
    required this.packageList,
    required this.phone,
    required this.typeList,
  });
  final GlobalKey<FormState> formKey;
  final TextEditingController phone;
  final List<Package> packageList;
  final List<String> typeList;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    if (packageList.isEmpty) return SizedBox.fromSize();
    ref.listen(topupController, (previous, next) {
      return next.showSnackbarOnError(context);
    });
    final showMore = ref.watch(showAllPackageProvider);
    final selectedType = ref.watch(selectedTypeProvider);

    return DefaultTabController(
      length: typeList.length,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ButtonsTabBar(
            buttonMargin: const EdgeInsets.only(right: 16),
            contentPadding:
                const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: AppColor.brandColor,
              borderRadius: BorderRadius.circular(AppTheme.borderRadius),
            ),
            unselectedDecoration: BoxDecoration(
              color: AppColor.white,
              borderRadius: BorderRadius.circular(AppTheme.borderRadius),
            ),
            onTap: (value) {
              final e = typeList[value];
              ref.read(selectedTypeProvider.notifier).state = e;
            },
            tabs: typeList.map(
              (e) {
                final isActive = e == selectedType ||
                    (selectedType == null &&
                        typeList.isNotEmpty &&
                        typeList.first == e);
                return Tab(
                  child: Text(
                    e,
                    style: TextStyle(
                      color: isActive ? Colors.white : AppColor.neutral600,
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                    ),
                  ),
                );
              },
            ).toList(),
          ),
          h12,
          Container(
            decoration: topUpdecoration,
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Text(context.language.data, style: medium14),
                GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.zero,
                  itemCount: showMore
                      ? packageList.length
                      : (packageList.length >= 4 ? 4 : packageList.length),
                  shrinkWrap: true,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 8,
                      mainAxisSpacing: 8,
                      childAspectRatio: 2 / 1.1),
                  itemBuilder: (context, index) {
                    final package = packageList[index];
                    return GestureDetector(
                      onTap: () {
                        if (formKey.currentState?.validate() == true) {
                          topupDataModalBottomSheet(
                            context: context,
                            package: package,
                            ref: ref,
                            phone: phone,
                          );
                        }
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          color: AppColor.secondaryColor,
                          borderRadius: BorderRadius.circular(
                            AppTheme.borderRadius,
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Flexible(
                                child: Text(
                                  "${package.packageName!}(${package.validity})",
                                  style: regu12,
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                              Text(
                                '${package.price}',
                                style: semi14.copyWith(
                                    color: AppColor.signUpTxtColor),
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
                h8,
                ElevatedButton(
                  style: ElevatedButton.styleFrom().copyWith(
                    backgroundColor:
                        WidgetStatePropertyAll(AppColor.secondaryColor),
                  ),
                  onPressed: () {
                    ref
                        .read(showAllPackageProvider.notifier)
                        .update((state) => !state);
                  },
                  child: Text(
                    showMore ? context.language.less : context.language.more,
                    style: semi16.copyWith(
                      color: AppColor.signUpTxtColor,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Please make sure to include a working example code that can reproduce the bug. You can use the provided code snippet as a starting point.

Thank you for reporting this bug! We appreciate your contribution to improving our Flutter package.

[HeinKoZin]

[afonsocraposo]

Hi @HeinKoZin , I tried reproduce your issue, but wasn't able to. Please provide a minimal code sample to reproduce this issue.