Flutter css gradient to flutter

gradient_like_css 1.0.1

The gradient_like_css package for Flutter allows you to experience CSS-like gradients in your Flutter app.

gradient_like_css #

The gradient_like_css package for Flutter allows you to experience CSS-like gradients in your Flutter app.

Installing #

1. Depend on it #

Add this to your package’s pubspec.yaml file:

dependencies: gradient_like_css: ^1.0.0 

2. Install it #

You can install packages from the command line:

3. Import it #

Now in your Dart code, you can use:

import 'package:gradient_like_css/gradient_like_css.dart'; 

Usage #

import 'package:gradient_like_css/gradient_like_css.dart'; 

To use CssLike with the BoxDecoration :

BoxDecoration( gradient: linearGradient(-225, ['#69EACB', '#EACCF8 48%', "#6654F1"]), ); 

Example #

CssLike.linearGradient() #

🎨 Gradient at the default angle

background: linear-gradient(#e66465, #9198e5); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(null, ['#e66465', '#9198e5']), ), ); 

*Note: If the first argument is null , a 180 degree angular gradient is created.

🎨 Gradient at a 45-degree angle

background: linear-gradient(45deg, red, blue); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(45, ['red', 'blue']), ), ); 

🎨 Gradient that starts at 60% of the gradient line

background: linear-gradient(135deg, orange, orange 60%, cyan); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(135, ['orange', 'orange 60%', 'cyan']), ), ); 

*Note: You can add a color-stop points using the stop argument. It can be used with % such as ‘orange 60%’ .

🎨 Gradient with multi-position color stops

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(Alignment.centerRight, ['red 20%', 'orange 20% 40%', 'yellow 40% 60%', 'green 60% 80%', 'blue 80%']), ), ); 

*Note: The first argument can be Alignment as well as angle.

WebColors / X11Colors #

Container( color: X11Colors.MediumSpringGreen.color, ); 

To use WebColors by X11/CSS3 color names:

Container( // Can be used in lowercase too color: WebColors.of('MediumSpringGreen').color, ); 

Features #

Bugs or Requests #

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I’ll look into it. Pull request are also welcome.

Источник

How to Convert CSS Gradient to Flutter Gradient

More about DecoratedBox and ElevatedButton Solution 2: Please refer to below example code Using Elevated Button Question: How to convert CSS Gradient to Flutter Gradient?

How to Convert CSS Gradient to Flutter Gradient

How to convert CSS Gradient

background: linear-gradient(177.82deg, rgba(138, 160, 55, 0.2) 51.9%, #8E9B5E 69.3%); 

1. the hex colors of the Gradient
2. the direction (like at my example it’s from top to bottom and to say it to Flutter, it’ll be from topcenter bottomCenter)

 Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.red.withOpacity(0.1), Colors.green.withOpacity(0.8), ], ), ), ) 

Note number 1: that I just used the red and the green to make it clear for you, but you can use the hex colors like that

Note number 3: the function of .withOpacity(0.1) is just for Opacity like the percentage of the color appearance (from 0.0 to 1.0) and you can change the value of the Opacity or delete it if you want and use just Colors.red or Color(0xff8E9B5E)

Apply opacity to gradient colors in flutter, The color parameter requires a List of Color, so you can basically place any color widget with any opacity in that list. For linear

Flutter: LinearGradient background

Flutter: LinearGradient backgroundIn this video we look at using the LinearGradient
Duration: 4:30

Flutter — How To Use Gradient Colors (LinearGradient

Now you can learn how to use LinearGradient, RadialGradient and but I do know how to use Duration: 6:46

Flutter Tutorial — LinearGradient Background For Button, Text

Create a linear gradient background color in Flutter for Button, Text, Container, AppBar Duration: 4:52

How to make an ElevatedButton with a gradient background in Flutter?

I have found multiple examples on stack overflow of how to utilize a RaiseButton with a gradient background, but since the posting of those answers, RaiseButton has been deprecated.

Most solutions I have found for an ElevatedButton with a gradient background have been incomplete to some degree; either the gradient does not cover the entire background or the shadowing is off.

This has been the most complete answer I have found, but the onPress elevation presents a jarring shadow.

Below I have posted an answer with my best attempt of an ElevatedButton with a gradient background (Q&A style). Please comment in ways you see my answer improved!

After a lot of trial and error, I managed to recreate the ElevatedButton.

Below is my code for a reusable gradient button.

import 'package:flutter/material.dart'; class GradientElevatedButton extends StatelessWidget < const GradientElevatedButton(< Key? key, required this.child, required this.onPressed, required this.linearGradient, >) : super(key: key); final Widget child; final VoidCallback onPressed; final LinearGradient linearGradient; @override Widget build(BuildContext context) < return Padding( // ElevatedButton has default 5 padding on top and bottom padding: const EdgeInsets.symmetric( vertical: 5, ), // DecoratedBox contains our linear gradient child: DecoratedBox( decoration: BoxDecoration( gradient: linearGradient, // Round the DecoratedBox to match ElevatedButton borderRadius: BorderRadius.circular(5), ), child: ElevatedButton( onPressed: onPressed, // Duplicate the default styling of an ElevatedButton style: ElevatedButton.styleFrom( // Enables us to see the BoxDecoration behind the ElevatedButton primary: Colors.transparent, // Fits the Ink in the BoxDecoration tapTargetSize: MaterialTapTargetSize.shrinkWrap, ).merge( ButtonStyle( // Elevation declared here so we can cover onPress elevation // Declaring in styleFrom does not allow for MaterialStateProperty elevation: MaterialStateProperty.all(0), ), ), child: child, ), ), ); >> 

How to have two gradients side by side in flutter, decoration: const BoxDecoration( gradient: LinearGradient( maxHeight, child: Column( // do everything on column children: [ ], )

LinearGradient button figma to flutter

background: linear-gradient(91.97deg, #F8A170 14.73%, #FFCD61 97.52%); border-radius: 10px; 

I want to go with flutter but when I give these colors to the container widget with child elevated button, I can’t get the result I want. I made the button style transparent, but still I couldn’t solve it.

Based on your image and css, You can simply decorate the style of ElevatedButton .

 DecoratedBox( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), gradient: const LinearGradient( colors: [ Color(0xFFF8A170), Color(0xFFFFCD61), ], ), ), child: SizedBox( width: 400, height: 75, child: ElevatedButton( style: ElevatedButton.styleFrom( elevation: 0, primary: Colors.white.withOpacity(0), padding: const EdgeInsets.all(0), ), onPressed: () <>, child: const Text( "Search a room", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 22, ), ), ), ), ), 

More about DecoratedBox and ElevatedButton

Please refer to below example code

LinearGradient yellowLinearGradientValues() < return LinearGradient( colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.65)], ); >@override Widget build(BuildContext context) < return Scaffold( body: Center( child: ElevatedButton( onPressed: () <>, style: ElevatedButton.styleFrom( elevation: 0.0, padding: EdgeInsets.zero, primary: Colors.transparent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), side: BorderSide( width: 0.0, color: Colors.orange, style: BorderStyle.none, ), tapTargetSize: MaterialTapTargetSize.shrinkWrap, ), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(8.0), ), gradient: yellowLinearGradientValues(), ), child: Padding( padding: EdgeInsets.symmetric( horizontal: 40.0, vertical: 8.0, ), child: Text( "Search a Room" ?? "", textAlign: TextAlign.start, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24.0, ), ), ), ), ), ), ); > 

LinearGradient yellowLinearGradientValues() < return LinearGradient( colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.7)], ); >@override Widget build(BuildContext context) < return Scaffold( body: Center( child: ElevatedButton( onPressed: () <>, style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.transparent), elevation: MaterialStateProperty.all(0.0), padding: MaterialStateProperty.all(EdgeInsets.zero), tapTargetSize: MaterialTapTargetSize.shrinkWrap, ), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(8.0), ), gradient: yellowLinearGradientValues(), ), child: Padding( padding: EdgeInsets.symmetric( horizontal: 40.0, vertical: 8.0, ), child: Text( "Search a Room" ?? "", textAlign: TextAlign.start, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 24.0, ), ), ), ), ), ), ); > 

Flutter Tutorial — Set Screen Background Color, Use Flutter to set the Screen Background Color to a single background color or to apply a Duration: 7:22

Источник

gradient_like_css

The gradient_like_css package for Flutter allows you to experience CSS-like gradients in your Flutter app.

Installing

1. Depend on it

Add this to your package’s pubspec.yaml file:

dependencies: gradient_like_css: ^1.0.0 

2. Install it

You can install packages from the command line:

3. Import it

Now in your Dart code, you can use:

import 'package:gradient_like_css/gradient_like_css.dart'; 

Usage

import 'package:gradient_like_css/gradient_like_css.dart'; 

To use CssLike with the BoxDecoration :

BoxDecoration( gradient: linearGradient(-225, ['#69EACB', '#EACCF8 48%', "#6654F1"]), ); 

Example

CssLike.linearGradient()

🎨 Gradient at the default angle

background: linear-gradient(#e66465, #9198e5); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(null, ['#e66465', '#9198e5']), ), ); 

*Note: If the first argument is null , a 180 degree angular gradient is created.

🎨 Gradient at a 45-degree angle

background: linear-gradient(45deg, red, blue); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(45, ['red', 'blue']), ), ); 

🎨 Gradient that starts at 60% of the gradient line

background: linear-gradient(135deg, orange, orange 60%, cyan); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(135, ['orange', 'orange 60%', 'cyan']), ), ); 

*Note: You can add a color-stop points using the stop argument. It can be used with % such as ‘orange 60%’ .

🎨 Gradient with multi-position color stops

background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); 

Container( height: 300, width: 300, decoration: BoxDecoration( gradient: linearGradient(Alignment.centerRight, ['red 20%', 'orange 20% 40%', 'yellow 40% 60%', 'green 60% 80%', 'blue 80%']), ), ); 

*Note: The first argument can be Alignment as well as angle.

WebColors / X11Colors

Container( color: X11Colors.MediumSpringGreen.color, ); 

To use WebColors by X11/CSS3 color names:

Container( // Can be used in lowercase too color: WebColors.of('MediumSpringGreen').color, ); 

Features

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I’ll look into it. Pull request are also welcome.

Libraries

gradient_like_css package

Источник