flutter : Curved Navigation Bottom Bar

✅ curved navigation bottom bar 결과 화면

• flutter package 가져오기

pubspec.yaml 들어가서 아래와 같이 적은 후

dependencies: curved_navigation_bar: ^1.0.3

pub get을 눌러 패키지 install 한다.

• import 하기

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

• 코드작성하기

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'mainpage.dart';
import 'settingpage.dart';

void main() => runApp(TimerApp());

class TimerApp extends StatelessWidget {
  const TimerApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'interval_timer',
        theme: ThemeData(primarySwatch: Colors.yellow),
        home: MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0; //index 지정
  final screens = [MainPage(), SettingPage()]; //screen 지정

  final items = <Widget>[
    Icon(Icons.local_fire_department_outlined, size: 30),
    Icon(Icons.settings, size: 30)
  ]; //bottombar_icon 작성

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Color(0xffFFF246),
          title: Text('INTERVAL TIMER', style: TextStyle(color: Colors.black)),
          centerTitle: true,
        ),
        bottomNavigationBar: CurvedNavigationBar(
            items: items,
            height: 75,
            color: Color(0xffFFF246),
            backgroundColor: Colors.transparent,
            index: index,
            onTap: (index) => setState(() => this.index = index)),
        body: screens[index]);//bottomNavigationBar 
  }
}

Uploaded by N2T