ElevatedButton을 이용해서 모서리가 둥글고 아이콘이 적용된 버튼 만들기

 

ElevatedButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SomeScreen(),
        ),
      );
    },
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.transparent,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20)),
    ),
    child: const Padding(
      padding: EdgeInsets.all(20.0),
      child: Icon(
        Icons.play_arrow,
        size: 50.0,
        color: Colors.white,
      ),
    ),
)

 

위 코드는 ElevatedButton을 이용해서 모서리가 둥글고 아이콘이 적용된 버튼입니다.

버튼을 클릭하면 SomeScreen으로 이동하는 이벤트가 동작됩니다.

아이콘은 play arrow( ▷ ) 입니다.

 

ElevatedButton 외형적이 특징은 style에 styleFrom을 이용합니다.

styleFrom에 대한 기술 문서는 아래를 참고 바랍니다.

https://api.flutter.dev/flutter/material/ElevatedButton/styleFrom.html

styleFrom method - ElevatedButton class - material library - Dart API