The Essential Companion for Flutter Devs
Master Flutter,Faster.
Learn, practice, and build amazing, high-performance apps with curated content in your pocket.
Used by developers at companies like:
GoogleAlibabaNubankiFood
The App in Action
See how Flutter Guide brings concepts to life with a clean, intuitive, and powerful interface.
A Powerful Toolkit in Your Pocket
Flutter Guide is packed with features designed to accelerate your learning and productivity.
Widget of the Day
Discover a new widget daily with interactive examples and ready-to-use code.
UI's & Snippets
Browse a curated collection of interfaces and code snippets to speed up your development.
Curated Content
Learn with practical guides and real-world examples you can apply immediately.
From Example to Implementation, Instantly.
See the visual result and grab the Dart code with a single tap. Learning Flutter has never been more direct.
Flutter!
gradient_card.dart
1import 'package:flutter/material.dart';
2
3void main() {
4 runApp(
5 const MaterialApp(
6 debugShowCheckedModeBanner: false,
7 home: Scaffold(
8 body: GradientCard(),
9 ),
10 ),
11 );
12}
13
14class GradientCard extends StatelessWidget {
15 const GradientCard({super.key});
16
17 @override
18 Widget build(BuildContext context) {
19 return Expanded(
20 child: Container(
21 decoration: const BoxDecoration(
22 gradient: LinearGradient(
23 colors: <Color>[
24 Color(0xFF2563EB),
25 Color(0xFF22D3EE),
26 ],
27 begin: Alignment.topLeft,
28 end: Alignment.bottomRight,
29 ),
30 ),
31 child: Center(
32 child: Container(
33 width: 260,
34 height: 460,
35 decoration: BoxDecoration(
36 gradient: const LinearGradient(
37 colors: <Color>[
38 Color(0xFF3B82F6),
39 Color(0xFF06B6D4),
40 ],
41 begin: Alignment.topLeft,
42 end: Alignment.bottomRight,
43 ),
44 borderRadius: BorderRadius.circular(32.0),
45 border: Border.all(
46 color: const Color(0xFF27272a),
47 width: 16.0,
48 ),
49 ),
50 child: const Center(
51 child: Text(
52 'Flutter!',
53 style: TextStyle(
54 color: Colors.white,
55 fontSize: 24.0,
56 fontWeight: FontWeight.bold,
57 letterSpacing: 1.1,
58 ),
59 ),
60 ),
61 ),
62 ),
63 ),
64 );
65 }
66}Frequently Asked Questions
Have a question? Find the answer here.
