Custom Widgets in Flutter

Custom widgets are an important aspect of Flutter development. Creating your own widgets allows you to encapsulate reusable UI components and improve the maintainability of your code.

Creating a Simple Custom Widget

Let’s start by creating a simple custom widget that displays a title and a description:

            
            class CustomCard extends StatelessWidget {
                final String title;
                final String description;

                CustomCard({required this.title, required this.description});

                @override
                Widget build(BuildContext context) {
                    return Card(
                        elevation: 5,
                        margin: EdgeInsets.all(10),
                        child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                    Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                                    SizedBox(height: 5),
                                    Text(description),
                                ],
                            ),
                        ),
                    );
                }
            }
            
        

Using the Custom Widget

Now, you can use this widget inside your app like any other widget:

            
            CustomCard(
                title: 'Flutter Tutorial',
                description: 'Learn how to create custom widgets in Flutter.',
            )
            
        

With custom widgets, you can create reusable and customizable UI components for your app.