#3 Dot_node CustomAppBar 만들기 (PreferSizeWidget 상속)

TODO 

* Custom AppBar 만들기

만들기 전 알아둘 사항

1. appBar는 Material에서 제공한다.
2. scaffold 하위 위젯으로 사용을 할 수 있다.
3. CustomAppBar를 만들기 위해서 PreferSizeWidget을 상속 받아 사용한다( 이 부분이 없으면 Custom을 할 수 없었다. )

---

완성된 appBar

1. appBar에 CustomAppBar() 호출 

2.PreferredSizeWidget 상속

Size가 필요하므로 아래 처럼 Size를 선언해 주어야한다.

3. 이제 필요한 위젯들을 작성해주기만 하면 된다. Search-Bar를 만드는 부분만 기록

SizedBox를 사용한 이유 : TextField를 사용할때 width를 설정해주지 않으면 가로가 무한대로 늘어나는 에러가 발생해서 SizedBox를 사용.

InputDecoration으로 디자인

filled : TextField의 백그라운드 색상 여부

contentPadding : Icon,Text의 위치를 모두 일정하게 조정 ( vertical 를 사용해 세로 중앙으로 조정 )

prefixIcon : TextField의 가장 왼쪽 아이콘 ( 오른쪽은 suffixIcon )

enabledBorder : 선택 되지 않았을 경우 디자인

focusedBorder : 선택 되었을 경우 디자인

 

전체 소스

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
  CustomAppBar({super.key});

  @override
  State<CustomAppBar> createState() => _CustomAppBar();

  @override
  Size get preferredSize => Size.fromHeight(60);
}

class _CustomAppBar extends State<CustomAppBar> {
  late FocusNode _focusNode;
  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
  }

  @override
  void dispose() {
    _focusNode.dispose();

    super.dispose();
  }

  final TextStyle fontStyle = TextStyle(color: Colors.grey.shade600, fontSize: 16, fontWeight: FontWeight.w600);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Icon(
                Icons.home,
                color: Colors.black,
              ),
              Row(
                children: [
                  TextButton(
                    onPressed: (() {}),
                    child: Text(
                      "사람",
                      style: fontStyle,
                    ),
                  ),
                  TextButton(
                    onPressed: (() {}),
                    child: Text(
                      "작업",
                      style: fontStyle,
                    ),
                  ),
                  TextButton(
                    onPressed: (() {}),
                    child: Text(
                      "채용",
                      style: fontStyle,
                    ),
                  ),
                  TextButton(
                    onPressed: (() {}),
                    child: Text(
                      "취업",
                      style: fontStyle,
                    ),
                  ),
                ],
              ),
              SizedBox(
                width: 600.w,
                child: TextField(
                  focusNode: _focusNode,
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.grey.shade100,
                    hintText: "검색",
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(vertical: 8.0),
                    prefixIcon: Icon(Icons.search),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(30)),
                      borderSide: BorderSide(
                        color: Colors.grey.shade200,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(30)),
                      borderSide: BorderSide(
                        color: Colors.grey.shade200,
                      ),
                    ),
                  ),
                ),
              ),
              Row(
                children: [
                  IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.email,
                      color: Colors.black,
                    ),
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.notifications,
                      color: Colors.black,
                    ),
                  ),
                  CircleAvatar(
                      // 추후 만약 null이면 null일때 이미지 보여주도록 하기.
                      backgroundImage: AssetImage("assets/profile.jpeg")),
                  Image.asset("assets/testlogo.jpg"),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}