Flutter Onboarding Screen Simple UI in Flutter

 import "package:flutter/material.dart";

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Onboarding",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.grey,
          centerTitle: true,
        ),
      ),
      home: const FlutterOnboardingScreenTutorial(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: Center(
        child: Column(
          children: <Widget>[
            const SizedBox(height: 100.0),
            Image.asset("assets/images/Onboarding_Crop.jpg",
                height: 150.0, width: 150.0),
            const SizedBox(height: 30.0),
            const Text(
              "Flutter Onboarding",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                  fontSize: 30.0),
            ),
            const SizedBox(height: 25.0),
            const Text(
              "Build your onboarding flow in seconds.",
              style: TextStyle(color: Colors.white, fontSize: 17.0),
            ),
          ],
        ),
      ),
    );
  }
}

import "package:flutter/material.dart";

class UiHelper {
  static customAppBar(String text) {
    return AppBar(
      title: Text(
        text,
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
      centerTitle: true,
    );
  }

  static customElevatedButton(
      String text,
      VoidCallback callback,
      Color color,
      double width,
      double height,
      BuildContext context,
      Color color2,
      double size) {
    return ElevatedButton(
      onPressed: callback,
      style: ElevatedButton.styleFrom(
        backgroundColor: color,
        fixedSize: Size(width, height),
      ),
      child: Text(
        text,
        style: TextStyle(
            fontWeight: FontWeight.bold, color: color2, fontSize: size),
      ),
    );
  }

  static customTextFormField(TextEditingController controller, double radius,
      String text, TextInputType type) {
    return TextFormField(
      controller: controller,
      keyboardType: type,
      decoration: InputDecoration(
        hintText: text,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(radius),
        ),
      ),
    );
  }
}