버튼 (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),
);

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

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

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

Previous토스트 (Toast)Next텍스트 (Text)

Last updated 10 months ago