Flutter : InkWell 버튼 만들기

InkWell 버튼 만들기

주로 화면 배치등 UI작업에 사용되는 Container widget을 Ink, InkWell widget으로 감싸 안으면

(~~ 그렇게 우리... 이 밤의 끝을 잡고...ㅎ 불현듯 옛날옛적 노래가사가...)

모서리를 둥글게(UI), 그리고 사용자의 이벤트를 받을 수 있는 버튼을 만들 수 있습니다.

(물결(리플) 효과는 기본이요, 마우스 포인터가 버튼 위에 있을 때 색깔 변화 등 여러 옵션을 줄 수 있음.)

InkWell(Ink) 버튼 만들기 화면

- hoverColor : 버튼 위에 마우스 포인터 있을 때의 색깔

- borderRadius : 모서리 둥글하기, 값이 높아질수록 동글동글해짐

- onTap() : 버튼이 클릭되었을 때 처리 함수(여기에 어떤 작업을 할지 코딩해 줌.)

 

아래 전체 소스 및 실행영상입니다.

오늘도 감사합니다. (__)>

 

< main.dart >

import 'package:flutter/material.dart';

void main()
{
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'InkWell Button App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
        textTheme: TextTheme(
          displayMedium: TextStyle(
            color: Colors.indigo,
          ),
        ),
      ),
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  final double _spaceWidth = 10.0;
  final double _spaceHeight = 10.0;
  double _screenWidth = 0.0;
  double _screenHeight = 0.0;

  double _buttonWidth = 0.0;
  double _buttonHeight = 0.0;
  double _fontSize = 0.0;

  @override
  Widget build(BuildContext context) {

    _screenWidth = MediaQuery.of(context).size.width;
    _buttonWidth = (_screenWidth - (_spaceWidth * 4)) / 3;
    _screenHeight = MediaQuery.of(context).size.height;
    _buttonHeight = (_screenHeight - (_spaceHeight * 4)) / 3;
    if (_buttonWidth < _buttonHeight) {
      _fontSize = _buttonWidth / 2;
    }
    else {
      _fontSize = _buttonHeight / 2;
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('InkWell Button Demo'),
      ),
      body: Center(
        child: Column(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(height: 50.0),
            _showButton(),
          ],
        ),
      ),
    );
  }
  // 200: Color(0xFF9FA8DA)
  Widget _showButton() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          InkWell(
            hoverColor: const Color.fromARGB(0x50, 0xe8, 0xea, 0xf6),
            borderRadius: BorderRadius.circular(20),
            // 버튼이 클릭되었을 때 처리함수
            onTap: () {
              print('onTap button down');
            },
            child: Ink(
              decoration: BoxDecoration(
                color: Colors.indigo,
                borderRadius: BorderRadius.circular(20),
              ),
              //alignment: Alignment.center,
              width: _buttonWidth,
              height: _buttonHeight,
              child: Container(
                alignment: Alignment.center,
                child: Text(
                  'Run',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: _fontSize,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  } // end of _showButton
}

 

< 실행영상 >

InkWell(Ink) Button demo