Layout Bg Image

  • Usage

    To set a background image for a screen in Flutter, you can use a Container or the decoration property of a Scaffold widget. Here's an example of using a Container as the background for a screen:

    declare the asset in your pubspec.yaml file:

    
               flutter:
                  assets:
                    - assets/background_image.jpg
    
               

    Main screen

    
               import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: BackgroundImageScreen(),
          ),
        );
      }
    }
    
    class BackgroundImageScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/background_image.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: Center(
              child: Text(
                'Your Content Here',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        );
      }
    }