Flutter Custom Button

플러터에서 제공하는 버튼이 몇개 있다.

기존 버튼들인 FlatButton, OutlineButton, RaisedButton  -> TextButton, OutlinedButton, ElevatedButton 으로 변경 되었다.

이런 버튼에 개발자가 맞춤형 버튼을 별도로 구현할 수 있다.

아래 예제 이외에도 몇 개 더 있지만 이 버튼이 사용법에 좋은 예시인거 같아서 이걸 적어둔다.

import 'package:flutter/material.dart';
 
class CustomGradientButton extends StatelessWidget {  
  final Function()? onTap;
  final String? btnText;
  final Color? firstColor;
  final Color? secondColor;
 
  const CustomGradientButton({
    Key? key,
    required this.onTap,
    this.btnText = 'Gradient Button',
    this.firstColor = Colors.green,
    this.secondColor = Colors.greenAccent,
  }) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(10.0),
        splashColor: Colors.blue.withOpacity(0.4),
        child: Ink(
          height: 50.0,
          width: width,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            gradient: LinearGradient(
              colors: [
                firstColor!,
                secondColor!,
              ],
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
            ),
          ),
          child: Center(
            child: Text(
              btnText!,
              style: const TextStyle(
                fontSize: 24.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
 

 

출처 : https://skillypro.com/how-to-make-a-custom-gradient-button-in-flutter/

 

 

import 'package:flutter/material.dart';
 
class RoundedButton extends StatelessWidget {
  const RoundedButton({
    Key? key,
    required this.colour,
    required this.title,
    required this.onPressed,
  }) : super(key: key);
 
  final Color colour;
  final String title;
  final VoidCallback onPressed;
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
        elevation: 5.0,
        color: colour,
        borderRadius: BorderRadius.circular(30.0),
        child: MaterialButton(
          onPressed: onPressed,
          minWidth: 200.0,
          height: 42.0,
          child: Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

참고하면 좋은 자료

https://nilenpatelinc.com/post/flutter-ui-3-fun-with-buttons-in-flutter/

Flutter UI #3: Fun with Buttons in Flutter - Nilen Patel Inc.