CODEWITHSUNDEEP
flutterflutter-layout
Muhamad Haydar Jawad
Muhamad Haydar Jawad

Reputation: 613

How to make Elevated Button with Gradient background?

I am trying to create an Elevated button with gradient background, But it provides some parameters that do not fit it well, and May you know that after Flutter 2.0 version most of the Button classes have been deprecated such as Raised Button, Flat Button, ... etc

ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
  primary: Colors.teal,
  onPrimary: Colors.white,
  onSurface: Colors.grey,
),
onPressed: () {
  print('Pressed');
},
)

Is there anyway to create ElevatedButton with gradient background?

Upvotes: 19

Views: 36313

Answers (7)

Chegz Zone
Chegz Zone

Reputation: 1

use this package https://pub.dev/packages/gradient_elevated_button This is performance optimised package.

GradientElevatedButton(
  onPressed: () {

  },
  style: GradientElevatedButton.styleFrom(
    gradient: const LinearGradient(colors: [
      Color.fromARGB(255, 166, 206, 57),
      Color.fromARGB(255, 0, 175, 173),
    ],
      disabledGradient: const LinearGradient(colors: [
        Colors.grey.withAlpha(200),
        Colors.grey,
        Colors.grey.withAlpha(200),
      ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
  ),
  child: const Text("This is Gradient Elevated Button"),
)

show screenshot

Upvotes: 0

Quick learner
Quick learner

Reputation: 11477

Try this

Container(
  padding: EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 6.0),
  decoration: BoxDecoration(
      gradient:
          LinearGradient(colors: [Color(0xff3b8594), Color(0xff59a6b6)]),
      borderRadius: BorderRadius.circular(25.0)),
  child: Text(
    'View more',
    style: TextStyle(color: Colors.white, fontSize: 16.0),
  ),
)

Result

enter image description here

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 268284

Screenshot (Null safe)

enter image description here

Create this class (customizable)

class MyElevatedButton extends StatelessWidget {
  final BorderRadiusGeometry? borderRadius;
  final double? width;
  final double height;
  final Gradient gradient;
  final VoidCallback? onPressed;
  final Widget child;

  const MyElevatedButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.borderRadius,
    this.width,
    this.height = 44.0,
    this.gradient = const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final borderRadius = this.borderRadius ?? BorderRadius.circular(0);
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        gradient: gradient,
        borderRadius: borderRadius,
      ),
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
          shape: RoundedRectangleBorder(borderRadius: borderRadius),
        ),
        child: child,
      ),
    );
  }
}

Usage:

Use it like a regular ElevatedButton:

MyElevatedButton(
  width: double.infinity,
  onPressed: () {},
  borderRadius: BorderRadius.circular(20),
  child: Text('SIGN IN'),
)

Upvotes: 43

Priscila Nascimento
Priscila Nascimento

Reputation: 1

botao

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Priscila Dev'),
  ),
  body: Center(
      child: Container(
    width: 300,
    height: 100,
    decoration: const ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.blue, Colors.orange, Colors.green],
      ),
    ),
    child: MaterialButton(
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      shape: const StadiumBorder(),
      child: const Text(
        'ENCERRAR[enter image description here][1]',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () {
        print('Hello!');
      },
    ),
  )),
);

}

Upvotes: 0

Muhammad Umer Yasin
Muhammad Umer Yasin

Reputation: 149

Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.0),
                  gradient: LinearGradient(
                    begin: Alignment(-0.95, 0.0),
                    end: Alignment(1.0, 0.0),
                    colors: [const Color(0xff667eea), const Color(0xff64b6ff)],
                    stops: [0.0, 1.0],
                  ),
                ),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.transparent,
                      onSurface: Colors.transparent,
                      shadowColor: Colors.transparent,),

                  onPressed: (){},

                  child: Center(
                    child: Text(
                      'Log in',
                      style: TextStyle(
                        fontFamily: textFontFamilySegoeUI,
                        fontSize: 16,
                        color: const Color(0xffffffff),
                        letterSpacing: -0.3858822937011719,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),

Upvotes: 7

Astick
Astick

Reputation: 311

import 'package:flutter/material.dart';

class RoundedButtonWidget extends StatelessWidget {
  final String buttonText;
  final double width;
  final Function onpressed;

  RoundedButtonWidget({
    required this.buttonText,
    required this.width,
    required this.onpressed,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Colors.black26, offset: Offset(0, 4), blurRadius: 5.0)
          ],
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            stops: [0.0, 1.0],
            colors: [
              Colors.deepPurple.shade400,
              Colors.deepPurple.shade200,
            ],
          ),
          color: Colors.deepPurple.shade300,
          borderRadius: BorderRadius.circular(20),
        ),
        child: ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              minimumSize: MaterialStateProperty.all(Size(width, 50)),
              backgroundColor:
                  MaterialStateProperty.all(Colors.transparent),
              // elevation: MaterialStateProperty.all(3),
              shadowColor:
                  MaterialStateProperty.all(Colors.transparent),
                  ),
          onPressed: () {
            onpressed();
          },
          child: Padding(
            padding: const EdgeInsets.only(
              top: 10,
              bottom: 10,
            ),
            child: Text(
              buttonText,
              style: TextStyle(
                fontSize: 18,
                // fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

enter image description here

Upvotes: 20

Mingjia Li
Mingjia Li

Reputation: 11

Container(
                    width: 1120.w,
                    height: 180.h,
                    margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [Color(0xFF0379C6), Color(0xFF1298EF)]),
                        
                        borderRadius: BorderRadius.circular(25.r),
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                              color: Color.fromRGBO(16, 142, 233, 0.57),
                              blurRadius: 13)
                        ]),
                    child: ElevatedButton(
                      style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(
                            Colors.transparent), 
                      ),
                      onPressed: () => setState(() {
                        // _launched = _makePhoneCall('tel:$_phone');
                      }),
                      child: Text(
                        'Submit',
                        style:
                            TextStyle(color: Colors.white, fontSize: 64.sp),
                      ),
                    ),
                  )

Upvotes: 1

Related Questions