Text and Image Alignment in flutter - flutter

Question

I want to keep a space between "Let your Style Speaks" and "Discover..." text. also want to align the image down from the top a little bit. here's my code and please help me to do those changes. I was trying but I'm unable to do this. can someone please send where want to be edited. I have attached UI for your reference. this is the current UI I want to be changed
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Auth Screen 1',
theme: ThemeData(
brightness: Brightness.light,
//primaryColor: kPrimaryColor,
// scaffoldBackgroundColor: kBackgroundColor,
textTheme: TextTheme(
headline4:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
// button: TextStyle(color: kPrimaryColor),
headline6:
TextStyle(color: Colors.white70, fontWeight: FontWeight.normal),
),
inputDecorationTheme: InputDecorationTheme(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white.withOpacity(.2),
),
),
),
),
home: WelcomeScreen(),
);
}
}
class WelcomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
//
// backgroundColor: Color(0XFFd5ae48),
// ),
backgroundColor: Color(0XFFd5ae48),
body: Column(
children: <Widget>[
Expanded(
child: Container(
// height: MediaQuery.of(context).size.height * .4,
padding: EdgeInsets.only(top: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/girl.png"),
fit: BoxFit.cover,
),
),
),
flex: 2,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 15,bottom:10),
child: RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(
text: "Let Your\nStyles Speaks\n",
style: TextStyle( fontFamily: 'Sen',fontWeight: FontWeight.w700,fontSize: 30) ,
),
TextSpan(
text:
"Discover the latest trends in women fashion and explore your personality\n",
style: TextStyle( fontFamily: 'Sen',fontSize: 15) ,
)
],
),
),
),
FittedBox(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return HomePage();
},
));
},
child: Container(
margin: EdgeInsets.only(bottom: 30),
padding: EdgeInsets.symmetric(horizontal: 26, vertical: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.black,
),
child: Row(
children: <Widget>[
Text(
"Get started",
style: TextStyle(fontFamily:'sen',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
SizedBox(width: 10),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
),
],
),
),
],
),
);
}
}

Answer 1

You can use SafeArea for the app bar and in RichText you can use text span as <InlineSpan> and then you can able to use WidgetSpan. That helps you to use space between two spans.
TextSpan Part
TextSpan(
children: <InlineSpan>[
TextSpan(
text: "Let Your\nStyles Speaks\n",
style: TextStyle(
fontFamily: 'Sen',
fontWeight: FontWeight.w700,
fontSize: 30),
),
WidgetSpan(
child: Container(
height: 30,
)),
TextSpan(
text:
"Discover the latest trends in women fashion and explore your personality\n",
style: TextStyle(fontFamily: 'Sen', fontSize: 15),
)
],
)
complete code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Auth Screen 1',
theme: ThemeData(
brightness: Brightness.light,
//primaryColor: kPrimaryColor,
// scaffoldBackgroundColor: kBackgroundColor,
textTheme: TextTheme(
headline4:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
// button: TextStyle(color: kPrimaryColor),
headline6:
TextStyle(color: Colors.white70, fontWeight: FontWeight.normal),
),
inputDecorationTheme: InputDecorationTheme(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white.withOpacity(.2),
),
),
),
),
home: WelcomeScreen(),
);
}
}
class WelcomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
//
// backgroundColor: Color(0XFFd5ae48),
// ),
backgroundColor: Color(0XFFd5ae48),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Container(
// height: MediaQuery.of(context).size.height * .4,
padding: EdgeInsets.only(top: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/test.jpg"),
fit: BoxFit.cover,
),
),
),
flex: 2,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 15, bottom: 10),
child: RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: <InlineSpan>[
TextSpan(
text: "Let Your\nStyles Speaks\n",
style: TextStyle(
fontFamily: 'Sen',
fontWeight: FontWeight.w700,
fontSize: 30),
),
WidgetSpan(
child: Container(
height: 30,
)),
TextSpan(
text:
"Discover the latest trends in women fashion and explore your personality\n",
style: TextStyle(fontFamily: 'Sen', fontSize: 15),
)
],
),
),
),
FittedBox(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return Container();
},
));
},
child: Container(
margin: EdgeInsets.only(bottom: 30),
padding:
EdgeInsets.symmetric(horizontal: 26, vertical: 16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.black,
),
child: Row(
children: <Widget>[
Text(
"Get started",
style: TextStyle(
fontFamily: 'sen',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),
),
SizedBox(width: 10),
Icon(
Icons.arrow_forward,
color: Colors.white,
)
],
),
),
),
),
],
),
),
],
),
),
);
}
}