In this post, we’ll learn what Flutter card height is and how to change/customize it.
We’ll explain it step by step with an easy but proper Flutter example code. First, we’ll see what the default Flutter card height is. After that, we’ll change it using practical examples.
After reading this post, you’ll be able to easily change Flutter card height in your own Flutter code as well.
So without any delay, let’s dive right into its implementation.
Outline
- What is Flutter Card Height?
- Default Height of Flutter Card Widget
- Customize Flutter Card Height (2 Methods)
- Flutter Padding Widget
- Flutter SizedBox Widget
- Custom Flutter Card Height Source Code
- Conclusion
What is Flutter Card Height?
It specifies the vertical(top and bottom) size that the card widget covers. Let’s now understand it with practical examples.
Default Height of Flutter Card Widget
For that, we have to implement a simple Flutter card widget. The card widget has no specific height of its own. So we’ll pass a Flutter text widget to it. See below code:
Card(child: Text('Default Flutter Card Height'))
Customize Flutter Card Height (2 Methods)
There are two ways for customizing the Flutter card height. See below:
- Flutter Padding Widget
- Flutter SizedBox Widget
Flutter Padding Widget
First method is to use the Flutter padding widget. Its used to create a distance/space between the borders of card and the card’s child widget. We have to wrap the child widget with padding and specify the padding properties.
If you want to learn Flutter padding in detail, then click here.
We also have given our card widget a background color so the changes can be seen clearly.
Let’s now customize Flutter card height using padding widget. See below code:
Card( color: Colors.blue, child: Padding( padding: const EdgeInsets.symmetric( vertical: 26, horizontal: 10), child: Text( 'Custom Flutter Card Height', style: TextStyle(color: Colors.white), ), ))
You can see that the height of Flutter card widget is successfully customized by the use of Flutter padding widget.
Flutter SizedBox Widget
We can also customize the height of Flutter card widget by wrapping the card with Flutter SizedBox widget.
Click here if you want to read a detailed article on how to properly use Flutter sizedBox widget.
Let’s now customize our Flutter card height using sizedBox widget. See below code:
SizedBox( height: 50, child: Card( color: Colors.blue, child: Text( 'Custom Flutter Card Height', style: TextStyle(color: Colors.white), )), )
Custom Flutter Card Height Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: SizedBox(
height: 50,
child: Card(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Custom Flutter Card Height',
style: TextStyle(color: Colors.white),
),
)),
))));
}
}Conclusion
To conclude, hope you now have an in-depth practical knowledge of how to customize Flutter card height. I’ll be very happy to receive your feedback on this article.
I’d also highly encourage you to read my other articles as well. Thank you for reading this post.
Flutter app articles you might: Flutter app development, Flutter architecture, Flutter appbar title center, beautiful gradient login UI, Flutter widgets, custom animations in Flutter, Flutter bottom navigation bar, Flutter books, widgets in flutter, custom Flutter templates, Flutter development, Flutter appbar actions, Flutter web, Flutter sliverappbar,
