reduce some spaces in my column widgets after using mainAxisAlignment.spaceBetween-CodePudding

I am trying to space out my widgets and it worked with mainAxisAlignment.spaceBetween under my column widget but i want to get some widgets closer to each other than some. How do I lessen the space between some specific wigets...Below is my flutter code

Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(' '),
                  const Padding(
                    padding: EdgeInsets.only(left: 35.0),
                    child: Text(
                      'Cape Coast',
                      style: TextStyle(
                        fontSize: 40,
                        fontFamily: 'Dongle',
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  IconButton(
                    onPressed: () {
                      debugPrint('Search pressed');
                    },
                    icon: const FaIcon(FontAwesomeIcons.locationArrow),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    'Today, ',
                    style: TextStyle(
                        fontFamily: 'Dongle',
                        fontSize: 35,
                        fontWeight: FontWeight.w100),
                  ),
                  Text(
                    '22:07',
                    style: TextStyle(
                        fontFamily: 'Dongle',
                        fontSize: 35,
                        fontWeight: FontWeight.w100),
                  ),
                ],
              ),

CodePudding user response：

Instead of using spacebetween you can just add some SizedBox()'s in between to have full control over the spacings

CodePudding user response：

If you want to add custom spaces so the best way is to use SizedBox(). You can still use spacebetween but you can add sizebox in between and add height. Now you would say that it will not be responsive so for that in width you can use MediaQuery.of(context).size.height / Number which you want(This number will increase and decrease the height.

So something like this:

          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(' '),
                  const Padding(
                    padding: EdgeInsets.only(left: 35.0),
                    child: Text(
                      'Cape Coast',
                      style: TextStyle(
                        fontSize: 40,
                        fontFamily: 'Dongle',
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  IconButton(
                    onPressed: () {
                      debugPrint('Search pressed');
                    },
                    icon: const FaIcon(FontAwesomeIcons.locationArrow),
                  ),
                ],
              ),
              SizedBox(
              height: 30
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    'Today, ',
                    style: TextStyle(
                        fontFamily: 'Dongle',
                        fontSize: 35,
                        fontWeight: FontWeight.w100),
                  ),
                  Text(
                    '22:07',
                    style: TextStyle(
                        fontFamily: 'Dongle',
                        fontSize: 35,
                        fontWeight: FontWeight.w100),
                  ),
                ],
              ),

CodePudding user response：

Instead of using spaceBetween you can use spaceAround or spaceEvenly. If it doesn't satisfy your need, use LayoutBuilder as parent widget [body:LayoutBuilder(...)].

You will have better control over UI using constraints.

LayoutBuilder(
      builder: (context, constraints) => Column(
        // mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(' '),
              const Padding(
                padding: EdgeInsets.only(left: 35.0),
                child: Text(
                  'Cape Coast',
                  style: TextStyle(
                    fontSize: 40,
                    fontFamily: 'Dongle',
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              IconButton(
                icon: Icon(Icons.ac_unit),
                onPressed: () {
                  debugPrint('Search pressed');
                },
                // icon: const FaIcon(FontAwesomeIcons.locationArrow),
              ),
            ],
          ),
          SizedBox(
            height: constraints.maxHeight * .2,// space you need 
          ), 
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                'Today, ',
                style: TextStyle(
                    fontFamily: 'Dongle',
                    fontSize: 35,
                    fontWeight: FontWeight.w100),
              ),
              Text(
                '22:07',
                style: TextStyle(
                    fontFamily: 'Dongle',
                    fontSize: 35,
                    fontWeight: FontWeight.w100),
              ),
            ],
          ),
        ],
      ),
    )

More about LayoutBuilder