container_tab_indicator

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

ContainerTabIndicator는 Flutter 패키지로, 색상, 테두리, 패딩 및 마진과 같은 익숙한 Container 속성을 사용하여 사용자 정의 탭 인디케이터를 만들 수 있도록 해줍니다. 기본 Material 또는 Cupertino 위젯에 의존하지 않고 탭 인디케이터를 설계하는 데 유연하고 직관적인 방법을 제공합니다. 고유한 시각적 스타일이나 플랫폼 간 일관된 브랜딩이 필요한 앱에 적합하며, Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 Flutter 플랫폼을 지원합니다.

사용 사례

사용자 지정 탭 UI
브랜딩 일관성
크로스 플랫폼 탭 디자인
비재질 탭 표시기
다이나믹 인디케이터 스타일

주요 기능

컨테이너 같은 스타일링
플랫폼에 관계없이
간편한 통합
유연한 레이아웃 제어
애니메이션을 지원합니다
최소한의 보일러플레이트

적합한 대상

시각적 제어를 원하는 디자이너
사용자 정의 탐색을 구축하는 개발자
브랜드 UI를 가진 앱
다중 플랫폼 애플리케이션
Material 기본값을 피하는 팀

고려 사항

탭 인디케이터 사용에 한정
내장 애니메이션 지원 없음
수동 위치 지정이 필요합니다
복잡한 탭 레이아웃에 적합하지 않습니다
부모 TabBar 구조에 의존함

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

ContainerTabIndicator

Add customized ContainerTabIndicator as an indicator for your TabBar. You can manipulate width, height, color, radius, border and positioning within Tab.

class ContainerTabIndicator extends Decoration {
  final double width;
  final double widthFraction;
  final double height;
  final double heightFraction;
  final EdgeInsetsGeometry padding;
  final Color color;
  final BorderRadius radius;
  final double borderWidth;
  final Color borderColor;
  ...
}

Example

The full example code can be found here.

import 'package:container_tab_indicator/container_tab_indicator.dart';

...

TabBar(
  tabs: [
    Text('First', style: TextStyle(color: Colors.black)),
    Text('Second', style: TextStyle(color: Colors.black)),
  ],
  indicator: ContainerTabIndicator(
    width: 16,
    height: 16,
    radius: BorderRadius.circular(8.0),
    padding: const EdgeInsets.only(left: 36),
    borderWidth: 2.0,
    borderColor: Colors.black,
  ),
),

example

Contributing

This package is still in early stages. To see the upcoming features, check the Issue board. If you notice any bugs not present in issues, please file a new issue. If you are willing to fix or enhance things yourself, you are very welcome to make a pull request.

패키지, 저장소 및 앱 카테고리 검색

패키지 설치