In this tutorial, we are going to create a simple and beautiful Getting started UI with the help of flutter. We can use this UI at the beginning of any app.

.
├── android
├── assets/
│ └── uiimage.jpg
├── ios
├── lib
└── ...main.dart with the below codeimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: MYUI(),
);
}
}
class MYUI extends StatefulWidget {
const MYUI({super.key});
State<MYUI> createState() => _MYUIState();
}
class _MYUIState extends State<MYUI> {
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
body: Stack(
children: [
Positioned(
width: size.width,
height: size.height * 0.6,
child: Image.asset(
"uiimage.jpg",
fit: BoxFit.fitWidth,
),
),
Positioned.fill(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0, -3),
blurRadius: 10),
],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20))),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(
height: 40,
),
const Text(
"Voluptate ex ut eu aliquip ipsum Lorem nulla.",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 30,
),
const Text(
"Voluptate ex ut eu aliquip ipsum Lorem nulla.",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: Colors.black54),
),
const SizedBox(
height: 40,
),
FloatingActionButton.extended(
extendedPadding:
const EdgeInsets.symmetric(horizontal: 40),
backgroundColor: Colors.deepPurpleAccent.shade700,
onPressed: () {},
label: const Text(
"Getting Started",
textScaleFactor: 1.4,
)),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
"Developed by",
textScaleFactor: 1.3,
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(
width: 8,
),
Text(
"Saral Code",
textScaleFactor: 1.3,
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.blue),
),
],
),
const SizedBox(
height: 40,
)
],
),
),
))
],
),
);
}
}
Now run the project and Hurray🎉🎉