Flutter Question posted in
The official Flutter documentation can be found here.

Padding-Margin flutter

Here is my code. and the design i am trying to code. I did it with lots of padding but I am looking for better solutions. Can anyone help me to complete the spacing here? with image and other companens same as the picture? Text font sizes etc. Is not important but spacing with other widgets where i am having problemsImage

import 'package:flutter/material.dart';

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(backgroundColor: Colors.transparent),
      body: Column(
        children: [
          Image.asset(
            'images/cat.jpg',
            fit: BoxFit.fill,
          ),
          Text('Cats are beautiful'),
          Text(
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore us vel facilisis. '),
          ElevatedButton(
            child: Text('Next'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5.0),
                ),
                backgroundColor: Colors.black,
                foregroundColor: Colors.white,
                padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
                textStyle:
                    TextStyle(fontSize: 16, fontWeight: FontWeight.normal)),
          ),
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0
    • For Next btn wrap it with Align() widget, give it alignment bottomRight,
    • Keep consistent space in b/w the 2 text using SizedBox(height:20) -you can give according to your need
    • for space between image and text also you can use SizedBox() with media query for responsive size and wrap it with constraint box to set minimum and maximum height of box or you can use container which have both the height and constraint property for that.
    Login or Signup to reply.
  2. 0

    enter image description here

    Try this and update the fonts, expected margins and colors

    class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(backgroundColor: Colors.transparent),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch, // Stretch children across the screen width
        children: <Widget>[
          Expanded(
            flex: 4,
            child: Image.asset(
              'images/cat.png',
              fit: BoxFit.fill, // Fill the width of the container
            ),
          ),
          Expanded(
            flex: 2,
            child: _buildTextSection(), // Extracted method for building the text section
          ),
          Expanded(
            flex: 1,
            child: _buildButtonSection(), // Extracted method for building the button section
          ),
        ],
      )

    );


  }

  Widget _buildTextSection() {
    return const Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16), // Horizontal padding for the texts
          child: Text(
            'Cats are beautiful',
            textAlign: TextAlign.center, // Center-align text
            style: TextStyle(
              fontSize: 35,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20), // Horizontal padding for the texts
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .',
            textAlign: TextAlign.center, // Center-align text
            style: TextStyle(
              fontSize: 17,
              fontWeight: FontWeight.w500,
              color: Colors.black,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildButtonSection() {
    return Container(
      alignment: Alignment.bottomRight,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 30), //  ,
      child: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),
          ),
          backgroundColor: Colors.black,
          foregroundColor: Colors.white,
          padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
          textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
        ),
        child: const Text('Next'),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search