3. 프로필 앱 만들기

InkWell 활용하여 버튼 만들기

Oct 10, 2024

오늘 만들것은 바로 저 Follow 와 Message 버튼 입니다.

요소를 가로로 두는 Row 내부에 팔로우, 메세지 버튼 위젯을 호출하고 있습니다.


  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildFollowButton(),
        _buildMessageButton(),
      ],
    );
  }
}

버튼이라고 했지만 따로 버튼 속성을 가진 위젯이 아닌, 컨테이너에 InkWell 속성을 추가해 이벤트를 추가 해 줬습니다.

https://docs.flutter.dev/cookbook/gestures/ripples



Widget _buildFollowButton(){
  return InkWell(
    onTap: (){
      print("Follow 버튼 클릭됨");
    },
    child: Container(
      alignment: Alignment.center,
      width: 150,
      height: 45,
      child: Text(
        "Follow",
        style: TextStyle(color: Colors.white),
      ),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
    ),
  );
}

Widget _buildMessageButton(){
  return InkWell(
    onTap: (){
      print("Message 버튼 클릭됨");
    },
    child: Container(
      alignment: Alignment.center,
      width: 150,
      height: 45,
      child: Text(
        "Message",
        style: TextStyle(color: Colors.black),
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(),
      ),
    ),
  );
}

💡

[프로필 앱 만들기] 1. 프로젝트 셋팅, 헤더 https://inblog.ai/hj/1-프로필-앱-만들기--30850 2. 프로필 카운드 바 만들기 https://inblog.ai/hj/2-프로필-앱-만들기-30576 3. 버튼 만들기 https://inblog.ai/hj/3-프로필-앱-만들기-31311 4. 탭바 만들기 https://inblog.ai/hj/4-프로필-앱-만들기-31312 5. 탭바뷰에 이미지 Grid 로 출력하기(끝) https://inblog.ai/hj/5-프로필-앱-만들기-31313