[flutter] FlatButton을 사용하여 동그라미 버튼을 만드는 방법은?

26 Dec 2023

flutter

아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
            onPressed: () {
              // 버튼을 눌렀을 때 수행할 작업을 여기에 추가
            },
            child: Text('동그라미 버튼'),
            color: Colors.blue,
            textColor: Colors.white,
            shape: CircleBorder(),
          ),
        ),
      ),
    );
  }
}

위 코드에서, FlatButton 위젯은 onPressed 콜백을 통해 버튼을 눌렀을 때 실행될 작업을 지정하고, child 속성을 사용하여 버튼에 표시될 텍스트를 정의합니다. color와 textColor를 사용하여 버튼의 배경색과 텍스트 색상을 지정할 수 있으며, shape 속성에 CircleBorder()를 할당하여 동그라미 모양으로 버튼을 만들 수 있습니다.

이렇게하면 FlatButton을 사용하여 동그라미 버튼을 만들 수 있습니다. Flutter에서 제공하는 다양한 위젯을 활용하여 사용자 정의 버튼을 만들고, 애플리케이션의 레이아웃을 향상할 수 있습니다.