Home > Software engineering >  Text padding - flutter
Text padding - flutter

Time:02-03

I want to create a padding between the text and the blue part. Now it looks like this:

problem

But I want a space like this:

i want

This is the code:

body: Column(
mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
        padding: EdgeInsets.only(left: 25, bottom: 24),
       // height: 100,
          width: double.infinity,
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 92, 172, 178),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(36),
            bottomRight: Radius.circular(36),
          )
        ),
        
        child: const Text(
              "Olá, usuário",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 35,
              ),
            )),
              Center(child: Text(
              "As suas finanças estão:",
              style: TextStyle(
                color: Colors.black,
                fontSize: 18,
              )),
            )]),

CodePudding user response:

You can include a SizedBox(height: 200), before Center widget. Or Padding widget with only top.

Another thing is you can use crossAxisAlignment: CrossAxisAlignment.center,

body: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
          padding: const EdgeInsets.only(left: 25, bottom: 24),
          width: double.infinity,
          decoration: BoxDecoration(
              color: Color.fromARGB(255, 92, 172, 178),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(36),
                bottomRight: Radius.circular(36),
              )),
          child: const Text(
            "Olá, usuário",
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 35,
            ),
          )),
      SizedBox(height: 100),
      Text("As suas finanças estão:",
          style: TextStyle(
            color: Colors.black,
            fontSize: 18,
          )),
    ]),

Also you can use LayoutBuilder to get widget size & You may like to add top text as custom AppBar. You can use toolbarHeight to get more size, or bottom

appBar: AppBar(
        // toolbarHeight: ,
        bottom: PreferredSize(
          child: Container(
            child: Row(
              children: [],
            ),
          ),
          preferredSize: Size.fromHeight(100),
        ),
      ),

For customAppBar with PreferredSizeWidget and also you can check SliverHeaderDelegate

  • Related