How to Add Space Between Widgets in Flutter?

In this article, we will learn how to add space between widgets. Many options are available in flutter between space of widgets of Mobile application. There are many options available for the spacing of widgets like Spacer, SizeBox, Flexible, etc.

A size box is an empty box. You can set its height and width according to your needs.

There are many parameters in the constructor's

  1. widget child: Widget in the free is passed.
  2. double height: The height that is to be applied to a child and pass double value.
  3. double width:  The width that is to be applied to a child and passes double value.
  4. key key: A unique key can be provided.

Syntax

 const SizedBox({

       Key key,

       double width,

       double height,

       Widget child

  })

 1.Example with sizebox

 import 'package:flutter/material.dart';
 void main() {
   runApp(HomeScreen());
 }
 class HomeScreen extends StatelessWidget {
   const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CandidRoot Solutions'),
          backgroundColor: Colors.blue,
        ),
        body: Center(
          child: Column(
            children: const [
              SizedBox(
                height: 20,
              ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'Exmaple 1',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ),
              SizedBox(
                height: 30,
              ),
              Card(
                 elevation: 10,
                 child: Padding(
                   padding: EdgeInsets.all(25),
                   child: Text(
                     'Exmaple 2',
                     style: TextStyle(color: Colors.blue),
                   ),
                 ),
               ),
             ],
           ),
         ),
       ),
     );
   }
 }
  • Output of above example 

 

2. Example without sizebox

 import 'package:flutter/material.dart';

 void main() {
   runApp(HomeScreen());
 }
 class HomeScreen extends StatelessWidget {
   const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CandidRoot Solutions'),
          backgroundColor: Colors.blue,
        ),
        body: Center(
          child: Column(
            children: const [
              SizedBox(
                height: 20,
              ),
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'Exmaple 1',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ),
              
              Card(
                elevation: 10,
                child: Padding(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'Exmaple 2',
                    style: TextStyle(color: Colors.blue),
                   ),
                 ),
               ),
             ],
           ),
         ),
       ),
     );
   }
 }
  • Output of above example 

        

Happy coding!


365Bloggy June 6, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1218
Zoom In and Out to TextView in Android
0 418
How to underline text in textview
0 347
Shine Effect in Android
0 297
How to Create Marquee Text in Android?
0 268
Our blogs
Archive