[flutter] Flutter에서 원형 아이콘 버튼을 만드는 방법은 무엇입니까?

InkWell 을 사용 하여 다음을 수행 할 수 있습니다 .

터치에 반응하는 머티리얼의 직사각형 영역입니다.

아래 예제는 InkWell. 주의 : 그렇게 할 필요가 없습니다 StatefulWidget. 카운트 상태를 변경하는 데 사용했습니다.

예:

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => new _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new InkWell(// this is the one you are looking for..........
        onTap: () => setState(() => _count++),
        child: new Container(
          //width: 50.0,
          //height: 50.0,
          padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
          decoration: new BoxDecoration(
            shape: BoxShape.circle,// You can use like this way or like the below line
            //borderRadius: new BorderRadius.circular(30.0),
            color: Colors.green,
          ),
          child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
        ),//............
      ),
      ),
    );
  }
}

splashColor,의 이점을 얻으려면 재료 유형이 원인 위젯을 사용하여 위젯을 highlightColor래핑하십시오 . 그런 다음 위젯 에서 제거하십시오 .InkWellMaterialdecorationContainer

결과: