Create a Welcome App Screen on Flutter

Flutter is a powerful UI toolkit that enables developers to create beautiful applications for mobile, web, and desktop from a single codebase. In this tutorial, we’ll guide you through the steps to create a simple welcome app screen using Flutter.

Step 1: Set Up Flutter Environment

Before creating the app, ensure you have Flutter installed on your machine. You can download and install Flutter from the official Flutter installation guide.

Step 2: Create a New Flutter Project

Open your terminal or command prompt and run the following command to create a new Flutter project:

flutter create welcome_app
    

Navigate into the project directory:

cd welcome_app
    

Step 3: Update the Main Dart File

Open the lib/main.dart file and replace its contents with the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WelcomeScreen(),
    );
  }
}

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to Our App!',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'We are glad to have you here.',
              style: TextStyle(
                fontSize: 16,
                color: Colors.grey[600],
              ),
            ),
            SizedBox(height: 40),
            ElevatedButton(
              onPressed: () {
                // Add action for button here
              },
              child: Text('Get Started'),
            ),
          ],
        ),
      ),
    );
  }
}
    

Explanation:

• MaterialApp: This widget initializes your app with the specified title and theme.
• Scaffold: Provides a structure for the app’s layout, including the background color.
• Column: Arranges its children vertically.
• ElevatedButton: A Material Design button that reacts to touches by filling with color.

Step 4: Run the App

To run the app, use the following command in your terminal:

flutter run
    

Final Thoughts

In this tutorial, you learned how to create a simple welcome app screen in Flutter. With just a few lines of code, you can create a visually appealing interface. Flutter’s powerful widgets make it easy to build beautiful UIs quickly. Explore further by adding more features and styles to enhance your app!