clip-inkwell

readme.md

clip-inkwell

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MultipleTabButton(
            width: 200,
            tabs: [
              TabButton(
                label: 'First',
                onTap: (index) {},
              ),
              TabButton(
                label: 'Second',
                onTap: (index) {},
              ),
            ],
            ),
        ),
      ),
    );
  }
}

class MultipleTabButton extends StatefulWidget {
  const MultipleTabButton({
    Key? key,
    required this.tabs,
    this.initialIndex,
    this.width,
  })  : assert(tabs.length > 1, 'Tabs length must be more than 1'),
        super(key: key);

  final List<TabButton> tabs;
  final int? initialIndex;
  final double? width;

  @override
  State<MultipleTabButton> createState() => _MultipleTabButtonState();
}

class _MultipleTabButtonState extends State<MultipleTabButton> {
  int _selectedIndex = 0;

  @override
  void initState() {
    if (widget.initialIndex != null) {
      _selectedIndex = widget.initialIndex!;
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 33,
      width: widget.width,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: Colors.blue,
        ),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: List.generate(
          widget.tabs.length,
          (index) {
            TabButton tab = widget.tabs[index];
            bool isSelected = index == _selectedIndex;

            return Flexible(
              child: Container(
                decoration: BoxDecoration(
                  color: isSelected ? Colors.blue : Colors.transparent,
                  border: index <= 0
                      ? null
                      : const Border(
                          left: BorderSide(
                            color: Colors.blue,
                          ),
                        ),
                ),
                child: InkWell(
                  onTap: isSelected
                      ? null
                      : () {
                          setState(() {
                            _selectedIndex = index;
                          });
                          tab.onTap(index);
                        },
                  child: Center(
                    child: Text(
                      tab.label,
                      style: TextStyle(
                        color: isSelected ? Colors.white : Colors.blue,
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class TabButton {
  final String label;
  final void Function(int) onTap;

  TabButton({
    required this.label,
    required this.onTap,
  });
}