afonsocraposo/buttons_tabbar

Hover decoration doesn't match decoration and unselectedDecoration

Closed this issue · 2 comments

Bug Report

Description

When using a decoration to change border radius, the hover decoration doesn't get updated to match.
image
image

Steps to Reproduce

  1. Create a ButtonsTabBar.
  2. Add custom decorations that change the border radius.
  3. Launch the application in chrome.
  4. Hover over the tab.

Expected Behavior

The hover decoration should match the border radius of the applied decoration.

Actual Behavior

The hover decoration defaults to the default value of 4.

Additional Information

It would be nice to just have the decoration exposed for hover so that additional changes could be made.

Code Example

import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: DefaultTabController(
          length: 3,
          child: Column(
            children: <Widget>[
              ButtonsTabBar(
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(4),
                    topRight: Radius.circular(4),
                    bottomLeft: Radius.circular(4),
                    bottomRight: Radius.zero,
                 ),
                  color: Colors.amber,
                ),
                unselectedDecoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(4),
                    topRight: Radius.circular(4),
                    bottomLeft: Radius.circular(4),
                    bottomRight: Radius.zero,
                   ),
                  color: Colors.white,
                ),
                tabs: const [
                  Tab(
                    icon: Icon(Icons.directions_car),
                    text: "car",
                  ),
                  Tab(
                    icon: Icon(Icons.directions_transit),
                    text: "transit",
                  ),
                  Tab(icon: Icon(Icons.directions_bike)),
                ],
              ),
              const Expanded(
                child: TabBarView(
                  children: <Widget>[
                    Center(
                      child: Icon(Icons.directions_car),
                    ),
                    Center(
                      child: Icon(Icons.directions_transit),
                    ),
                    Center(
                      child: Icon(Icons.directions_bike),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

This issue is stale because it has been open for 30 days with no activity.

This issue was closed because it has been inactive for 15 days since being marked as stale.