버튼 (Button)

플러터에서 자체적으로 제공하는 Button 위젯 뿐만 아니라, 인터넷에 공개된 UI/UX 컴포넌트들을 조합하여 만들어진 다양한 디자인의 버튼을 손쉽게 개발할 수 있습니다.

일반 버튼

플러터에서 자체적으로 제공하는 기본 위젯으로 TextButton, MaterialButton 등이 있습니다.

TextButton

텍스트가 들어간 간단한 버튼을 나타냅니다. 사용자의 터치에 반응하며, 텍스트 버튼을 누를 때마다 특정 동작을 수행할 수 있습니다.

TextButton(
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
  child: Text('Text Button'),
);

TextButton은 텍스트 스타일링 및 기능을 수정할 수 있으며, 다양한 커스터마이징 기능을 지원합니다.

Material Button

머터리얼 디자인의 버튼을 나타냅니다. 머터리얼 버튼은 물결 효과와 함께 사용자의 터치에 응답합니다.

MaterialButton(
  onPressed: () {
    // 버튼 클릭 시 실행될 동작
  },
  splashColor: theme.primaryColor,
  child: Text('Material Button'),
);

머터리얼 버튼은 물결 효과와 버튼 스타일링을 지원하며, 앱의 일관된 디자인을 유지하는 데 도움이 됩니다.

Elevated Button

입체감 있는 버튼을 나타냅니다. 사용자의 주목을 끌고 터치에 반응합니다.

ElevatedButton(
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
  child: Text('Elevated Button'),
);

배경색 및 텍스트 스타일을 수정할 수 있으며, 주로 중요한 작업을 나타내는 데 사용됩니다.

Outlined Button

테두리가 있는 버튼을 나타냅니다. 클릭 가능한 영역이 강조되어 표시되며, 주로 보조 작업을 수행하는 버튼으로 사용됩니다.

OutlinedButton(
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
  child: Text('Outlined Button'),
);

OutlinedButton.icon(
              icon:
                  Icon(Icons.backspace, size: Theme.of(context).iconTheme.size),
              label: Text('Back'),
              onPressed: () {},
            );

• OutlinedButton : 테두리가 있는 버튼을 구현합니다.

• OutlinedButton.icon : 아이콘을 포함한 테두리가 있는 버튼을 구현합니다.

테두리 색상 및 라인 두께를 지정할 수 있으며, 앱의 디자인에 따라 다양하게 스타일링 할 수 있습니다.

Floating Action Button

화면의 고정된 위치에 배치되어 사용자에게 빠른 액션 수행을 허용합니다.

FloatingActionButton(
  backgroundColor: theme.primaryColor,
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
  child: Icon(Icons.add),
);

텍스트와 아이콘을 함께 사용하여 빠르게 작업을 수행할 수 있으며, 화면의 고정된 위치에 배치하여 사용자 경험을 향상시킵니다.

Icon Button

아이콘을 사용하여 버튼 기능을 제공합니다. 주로 아이콘과 함께 작은 작업을 수행하는 데 사용됩니다.

IconButton(
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
  icon: Icon(Icons.check),
);

아이콘 스타일링과 함께 아이콘을 눌렀을 때의 동작을 정의할 수 있으며, 앱의 아이콘 기능을 강화하는 데 사용됩니다.

Dropdown Button

여러 선택지 중 하나를 선택하는 데 사용됩니다. 사용자가 버튼을 누르면 선택지 목록이 나타납니다.

DropdownButton(
  value: dropdownValue,
  items: dropdownList.map((String value) {
           // 드롭다운 버튼에 들어갈 아이템을 지정합니다.
    return DropdownMenuItem<String>(
      child: Text('$value'),
      value: value,
    );
  }).toList(),
  onChanged: (dynamic value) {
    setState(() {
      dropdownValue = value;
    });
  },
);

선택지 목록을 커스터마이징 하고, 선택한 값을 저장하는 데 사용됩니다.

커스텀 버튼

TextFlat Button

텍스트가 들어간 간단한 버튼을 나타냅니다. 사용자의 터치에 반응하며, 텍스트 버튼을 누를 때마다 특정 동작을 수행할 수 있습니다.

TextFlatButton(
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
  text: Text("TextFlat Button"),
);

텍스트 스타일링 및 기능을 수정할 수 있으며, 사용자에게 명확한 텍스트 버튼을 제공합니다.

MiddleSize Button

중간 크기의 버튼을 나타냅니다. 이 버튼은 사용자에게 중요한 작업을 나타내는 데 사용될 수 있으며, onPressed 속성을 통해 동작을 설정할 수 있습니다.

MiddleSizeButton(
  title: "MiddleSize Button",
  onPressed: () {
  // 버튼 클릭 시 실행될 동작
  },
);

사용자에게 미리 정의된 크기의 버튼을 제공하며, 디자인을 단순하게 유지하는 데 도움이 됩니다.

Gradation Button

그라데이션 스타일을 적용할 수 있는 버튼을 나타냅니다. 그라데이션은 버튼을 시각적으로 더 돋보이게 만들어줍니다.

GradationButton(
  onPressed: () {
   // 버튼 클릭 시 실행될 동작
  },
);

그라데이션 효과를 적용하고 사용자에게 시각적으로 눈에 띄는 버튼을 제공합니다.

OutlineAction Button

테두리 스타일을 적용할 수 있는 버튼을 나타냅니다. 테두리는 버튼의 윤곽을 강조하고 클릭 가능한 영역을 시각적으로 나타냅니다.

OutlineActionButton(
  title: "OutlineAction Button",
  onPressed: () => {
   // 버튼 클릭 시 실행될 동작
  },
);

테두리 색상과 스타일을 커스터마이징 할 수 있으며, 사용자에게 선택할 수 있는 옵션을 제공할 때 유용합니다.

OutlineAction Button with Icon

아이콘을 포함하여 테두리 스타일을 적용할 수 있습니다. 아이콘은 버튼의 기능을 더 잘 표현하는 데 도움이 됩니다.

OutlineActionButton(
  title: "OutlineAction Button with Icon",
  icon: Assets.check,
  onPressed: () => {
    // 버튼 클릭 시 실행될 동작
  },
);

아이콘과 텍스트를 함께 사용하여 사용자가 쉽게 이해하고 상호작용할 수 있는 버튼을 만들 수 있습니다.

애니메이션 버튼

애니메이션 효과를 포함한 버튼을 개발할 수 있습니다.

Like Button

"좋아요" 버튼을 구현하는 데 사용됩니다. 사용자가 "좋아요" 를 표시하거나 취소할 수 있으며, "좋아요" 상태에 따라 버튼의 모양이 변경됩니다.

LikeButton(isLiked: true);

사용자에게 즉각적인 피드백을 제공하고, 사용자의 상호작용에 따라 버튼을 업데이트합니다.

LoadingButton

로딩 진행 상황및 완료 여부를 나타내는 버튼입니다. 이 버튼은 주로 시간이 걸리는 작업을 수행하는 동안 사용됩니다.

LoadingButton(
  successIcon: Icons.check,
  child: Text('Loading Button', style: TextStyle(color: Colors.white)),
  controller: btnController,
  onPressed: () => {
    loading(btnController),
  },
);

버튼의 상태를 제어하는 컨트롤러를 통해 사용됩니다. 사용자에게 로딩 중임을 표시하고, 작업이 완료되면 완료 아이콘과 함께 알림을 제공합니다.

SNS 버튼 (Apple, Google, Facebook, Twitter, Kakao, Naver, LINE)

SNS(Social Networking Service) 계정으로 로그인할 수 있는 다양한 버튼 위젯을 만들 수 있습니다. 예를 들어, 아래와 같이 IconButton 과 SignInButton 을 사용하여 SNS 로그인 버튼을 구현할 수 있습니다.

IconButton

다양한 SNS 로고를 포함한 아이콘 버튼을 제공합니다. 각 버튼을 클릭하면 해당 SNS로 로그인할 수 있습니다.

IconButton(
  iconSize: 24,
  icon: Image.asset('assets/png/apple_logo.png'),
  onPressed: () => {
    // Apple 로그인 버튼 클릭 시 실행될 동작
  },
);

위와 같이 각 IconButton은 해당 SNS 로고와 함께 사용자에게 시각적으로 인식 가능한 로그인 옵션을 제공합니다.

SignInButton

특정 SNS 계정으로 로그인할 수 있는 버튼을 구현하는데 사용됩니다. 다양한 SNS 옵션을 제공하며, 각각의 버튼을 클릭하면 해당 SNS 계정으로 로그인할 수 있습니다.

SignInButton(
  Buttons.apple,
  text: 'Sign in with Apple',
  onPressed: () {
    // Apple 계정으로 로그인할 때 실행될 동작
  },
);

위와 같이 SignInButton은 SNS 로그인 옵션을 텍스트와 함께 제공하며, 버튼을 클릭하면 해당 계정으로 로그인할 수 있습니다.

다양한 SNS 로그인 버튼 위젯을 사용하여 사용자가 원하는 SNS 계정으로 로그인하고 앱을 편리하게 이용할 수 있도록 할 수 있습니다. 이러한 버튼 위젯을 통해 사용자 경험을 향상시키고 앱의 기능을 확장해보세요.

다양한 버튼 위젯을 활용하여 Flutter 앱의 사용자 인터페이스를 보다 다채롭게 디자인하고 사용자 경험을 향상시킬 수 있습니다. 또한 다양한 상황에서 사용자 경험을 개선하고 유용한 상호작용을 제공합니다. 앱의 요구사항에 따라 이러한 버튼을 적절하게 활용하여 필요에 맞는 버튼 위젯을 사용해 앱을 개발할 수 있습니다.