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

GitHub 저장소Dicksenz/custom_line_indicator_bottom_navbar

사용자 정의 라인 인디케이터 하단 네비게이션 바

Dicksenz/custom_line_indicator_bottom_navbar open-source repository details.

사용자 정의 라인 인디케이터 하단 네비게이션 바 프로젝트 이미지
스타
4
포크
3
최근 푸시(UTC)
2021. 12. 8.
프로젝트 상태
활성

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

custom_line_indicator_bottom_navbar

A fully customizable bottom navigation bar with line indicators and gradient.

alert2 alert2

Usage without gradient:

        class MyExample extends StatefulWidget {
        @override
        _MyExampleState createState() => _MyExampleState();
        }

        class _MyExampleState extends State<MyExample> {
        int _selectedIndex = 0; //default index

        List<Widget> _widgetOptions = [
            Text('Home'),
            Text('Account'),
            Text('Leaves'),
            Text('Loyalty'),
            Text('Requests'),
        ];
        @override
        Widget build(BuildContext context) {
            return Scaffold(
            appBar: AppBar(
                title: Text('Example'),
            ),
            body: Center(
                child: _widgetOptions.elementAt(_selectedIndex),
            ),
            bottomNavigationBar: CustomLineIndicatorBottomNavbar(
                selectedColor: Colors.blue,
                unSelectedColor: Colors.black54,
                backgroundColor: Colors.white,
                currentIndex: _selectedIndex,
                onTap: (index) {
                setState(() {
                    _selectedIndex = index;
                });
                },
                enableLineIndicator: true,
                lineIndicatorWidth: 3,
                indicatorType: IndicatorType.Top,
                // gradient: LinearGradient(
                //   colors: kGradients,
                // ),

                customBottomBarItems: [
                CustomBottomBarItems(
                    label: 'Home',
                    icon: Icons.home,
                ),
                CustomBottomBarItems(
                    label: 'Account',
                    icon: Icons.account_box_outlined,
                ),
                CustomBottomBarItems(
                    label: 'Leaves', icon: Icons.calendar_today_outlined),
                CustomBottomBarItems(
                    label: 'Loyalty',
                    icon: Icons.card_giftcard_rounded,
                ),
                CustomBottomBarItems(
                    label: 'Requests',
                    icon: Icons.list,
                ),
                ],
            ),
            );
        }
        }

Usage with gradient :

class MyExample extends StatefulWidget {

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

class _MyExampleState extends State<MyExample> {
    int _selectedIndex = 0; //default index

    List<Widget> _widgetOptions = [
        Text('Home'),
        Text('Account'),
        Text('Leaves'),
        Text('Loyalty'),
        Text('Requests'),
    ];
    @override
    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Example'),
        ),
        body: Center(
            child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: CustomLineIndicatorBottomNavbar(
        selectedColor: Colors.white,
        unSelectedColor: Colors.black54,
        backgroundColor: Colors.white,
        currentIndex: _selectedIndex,
        onTap: (index) {
            setState(() {
            _selectedIndex = index;
            });
        },
        enableLineIndicator: true,
        lineIndicatorWidth: 3,
        indicatorType: IndicatorType.Top,
        gradient: LinearGradient(
            colors: [Colors.pink, Colors.yellow],
        ),
        customBottomBarItems: [
            CustomBottomBarItems(
                label: 'Home',
                icon: Icons.home,
            ),
            CustomBottomBarItems(
                label: 'Account',
                icon: Icons.account_box_outlined,
            ),
            CustomBottomBarItems(
                label: 'Leaves', icon: Icons.calendar_today_outlined),
            CustomBottomBarItems(
                label: 'Loyalty',
                icon: Icons.card_giftcard_rounded,
            ),
            CustomBottomBarItems(
                label: 'Requests',
                icon: Icons.list,
            ),
        ],
        ),
    );
    }
}
Dicksen GitHub avatar
GitHub 작성자

Dicksen ↗

Flutter | Android | iOS | React Native developer, Contribute to the Dart community and Flutter package creator. Postgraduate in Mobile Application Development.

Mauritius
언어DartSwiftKotlinObjective-C

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 2 개

  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}

프로젝트에 맞는 저장소를 선택하려면?

사용 목적에 따라 검색하고 개발 활동을 비교한 뒤 원본 저장소에서 요구 사항을 확인하세요.

  1. 이름, 작성자 또는 설명으로 검색하고 기술 주제로 범위를 좁힙니다.
  2. 스타, 포크, 최근 푸시를 함께 비교하세요. 스타는 관심의 지표이며 품질을 보장하지 않습니다.
  3. 사용하기 전에 GitHub에서 README, 라이선스, Issues를 확인하세요.

출처 및 관리

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗