Hey there! Let's break down how to customize your login screen's background exactly as you asked—changing the solid color, adding an image background, and tweaking its opacity. I'll use your existing code as the base so you can easily drop in the changes.

1. Changing the Solid Background Color #

Right now your body uses a Container with color: Theme.of(context).primaryColor. To switch to a custom solid color, just replace that color value with any Color you want. For example, if you want a soft blue instead:

body: Container(
  padding: const EdgeInsets.all(15),
  // Replace primaryColor with your desired solid color
  color: Colors.lightBlue[50], 
  width: double.infinity,
  child: Column(
    // ... rest of your column content stays the same
  ),
)

You can also use hex colors like Color(0xFFE0F7FA) for full control over the shade.

2. Adding an Image Background with Opacity Control #

To add a background image, we'll use a Stack widget—this lets us layer the image behind your login form. There are two easy ways to adjust the image's opacity:

Option 1: Using the Opacity Widget #

Wrap your background image with Opacity to set a transparency level (0 = fully transparent, 1 = fully opaque). Here's how to integrate this into your code:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {},
        ),
      ),
      // Replace the original Container body with a Stack
      body: Stack(
        children: [
          // Background image with opacity
          Opacity(
            opacity: 0.3, // Adjust this value for transparency
            child: Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/background_image.jpg'), // Replace with your image path
                  fit: BoxFit.cover, // Makes the image fill the screen
                ),
              ),
            ),
          ),
          // Your original login form, now on top of the image
          Container(
            padding: const EdgeInsets.all(15),
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                // ... rest of your text fields and button stay the same
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

Option 2: Using ColorFilter (No Extra Widget) #

If you prefer not to add an extra Opacity widget, you can use a ColorFilter directly in the DecorationImage to darken or lighten the image with transparency:

decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage('assets/background_image.jpg'),
    fit: BoxFit.cover,
    // Add a semi-transparent black overlay to dim the image
    colorFilter: ColorFilter.mode(
      Colors.black.withOpacity(0.5),
      BlendMode.dstATop,
    ),
  ),
),

This method is great if you want to add a colored tint along with transparency.

Full Modified Code (Image Background Version) #

Here's the complete login screen code with a background image and opacity set to 0.3:

import 'package:flutter/material.dart';
void main() => runApp(Loginscreen());
class Loginscreen extends StatelessWidget {
  static const routeName = '/login';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {},
          ),
        ),
        body: Stack(
          children: [
            Opacity(
              opacity: 0.3,
              child: Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/login_background.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(15),
              width: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  TextField(
                    style: TextStyle(fontSize: 18, color: Colors.black54),
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      hintText: 'User Name',
                      contentPadding: const EdgeInsets.all(15),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                        borderRadius: BorderRadius.circular(5),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  TextField(
                    obscureText: true,
                    style: TextStyle(fontSize: 18, color: Colors.black54),
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      hintText: 'Password',
                      contentPadding: const EdgeInsets.all(15),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                        borderRadius: BorderRadius.circular(5),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  FlatButton(
                    onPressed: null,
                    child: Text(
                      'Log In',
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                    shape: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.white, width: 2),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    padding: const EdgeInsets.all(15),
                    textColor: Colors.white,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Quick Notes: #

• Make sure to add your image to the assets folder in your project and update the pubspec.yaml file to include it (add assets: - assets/your_image.jpg under the flutter section).
• Adjust the opacity value or ColorFilter settings until you get the exact look you want.

内容的提问来源于stack exchange，提问作者Hasitha Erandaka