Splash view body done

Presentation (Building the UI)

14:33

Summary

This lesson focuses on constructing the foundational UI for the Splash View while establishing best practices for project configuration. It covers defining a global scaffold background color via ThemeData to avoid redundant styling, extracting primary colors into a central constants file, and structuring asset paths cleanly using a static utility class. The lesson concludes with adding the logo asset, building the basic widget tree for the splash screen, and removing the debug banner.

Key Ideas

scaffoldBackgroundColor inside MaterialApp's ThemeData globally applies a default background color to all scaffolds.
constants.dart serves as a single source of truth for app-wide primitive values like kPrimaryColor to prevent hardcoding.
Assets directory must be located at the root of the Flutter project, alongside pubspec.yaml, rather than nested inside the lib folder.
AssetsData static class centralizes string paths for images, reducing the risk of runtime errors caused by typos.
CrossAxisAlignment.stretch forces a Column's children to expand to fill the maximum available cross-axis width.
debugShowCheckedModeBanner: false removes the red debug banner from the application's UI.

Code Snippets

lib/constants.dart - Centralizing app-wide constantsdart

import 'package:flutter/material.dart';

const kPrimaryColor = Color(0xff100B20);

lib/core/utils/assets.dart - Static class for safe asset pathingdart

class AssetsData {
  static const logo = 'assets/images/Logo.png';
}

lib/main.dart - Applying global theme and hiding debug bannerdart

import 'package:bookly/constants.dart';
import 'package:bookly/features/splash/presentation/views/splash_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class Bookly extends StatelessWidget {
  const Bookly({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: kPrimaryColor,
      ),
      home: const SplashView(),
    );
  }
}

pubspec.yaml - Registering the assets folderyaml

flutter:
  uses-material-design: true

  assets:
    - assets/images/

lib/features/splash/presentation/views/widgets/splash_view_body.dart - Building the final splash UIdart

import 'package:bookly/core/utils/assets.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashViewBody extends StatelessWidget {
  const SplashViewBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Image.asset(AssetsData.logo),
      ],
    );
  }
}

My Notes

Asset Folder Location: A very common mistake (which the instructor makes and corrects) is placing the assets folder inside the lib folder. It must sit at the root level of your project alongside pubspec.yaml.
Logo Formats & SVGs: For a minimalist, skeletal geometric logo composed of points and lines, utilizing the SVG format is highly recommended to maintain crisp vector resolution across all screen densities. Since Flutter doesn't render SVGs out of the box like it does PNGs, you would add the flutter_svg package and use SvgPicture.asset(AssetsData.logo) instead of Image.asset().
Asset Management Upgrades: The AssetsData static class is a massive improvement over raw strings. However, as the project grows, manually updating this file becomes tedious. Look into the flutter_gen package later—it automatically generates this exact class based on your pubspec.yaml contents.
Theming Strategy: Setting scaffoldBackgroundColor globally at the start is an excellent clean architecture practice. It separates the design configuration from the layout implementation.