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.

What do we have to create?

Getting Started UI with Flutter by Saral Code

Initial Setup

Structure
.
├── android
├── assets/
│   └── uiimage.jpg
├── ios
├── lib
└── ...
  • Create a flutter project
  • Download the image from Here
  • Create a folder inside the root directory named "assets"
  • Inside that folder paste the image
  • Replace main.dart with the below code

Source Code

main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MYUI(),
    );
  }
}

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

  @override
  State<MYUI> createState() => _MYUIState();
}

class _MYUIState extends State<MYUI> {
  @override
  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🎉🎉