Flutter can be used used to create a great-looking UI. So, in today's video, we will see how you can create different Gradients in your application. Let's start Step 1: Create a new Flutter Application. Step 2: For the gradient, we have to use the Container widget where we will have the BoxDecoration property which will allow us to create a gradient for our application. for example: Container( height: 300, width: 300, decoration: BoxDecoration( gradient: ), ), Now we have Different types of Gradients in Flutter for Sweep Gradient you can use it like this decoration: BoxDecoration( gradient: SweepGradient( colors: [Colors.green, Colors.lightBlue, Colors.red])), for Radial Gradient you can use it like this decoration: BoxDecoration( gradient: RadialGradient( colors: [Colors.red, Colors.blue, Colors.green])), for Linear Gradient you can use it like this decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.deepOrange, Colors.yellow.shade300])), Step 3: Now to Change the alignment of the gradients you can use AlignmentGeometry begin = Alignment.centerLeft, AlignmentGeometry end = Alignment.centerRight in the gradient property in BoxDecoration. for example decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.deepOrange, Colors.yellow.shade300])), Complete Example code to Create Gradient in Flutter import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:scroll_snap_list/scroll_snap_list.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Demo(), theme: ThemeData( brightness: Brightness.dark, ), ); } } class Demo extends StatelessWidget { const Demo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gradients'), ), body: Center( child: Container( height: 300, width: 300, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [Colors.deepOrange, Colors.yellow.shade300])), ), )); } } Output: Conclusion: In this way, we have learned how you can get different types of gradients in Flutter.
|
Article Contributed By :
|
|
|
|
|
309 Views |
|