I want to create a padding between the text and the blue part. Now it looks like this:
But I want a space like this:
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