CODEWITHSUNDEEP
flutterdartflutter-layout
EMahan K
EMahan K

Reputation: 467

How to add background image for widget in flutter

Trying to add background image for widget in flutter app but i do not know how to add it. I am new for flutter.So, If Anyone knows please help to find the solutions.

login.dart:

  Widget build(BuildContext context) {
  return Scaffold( 
  body: SingleChildScrollView(
      child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        children: [
          const SizedBox(
            height: 1,
          ),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Image.asset("images/logo.png"),
          ),
        
          const SizedBox(height: 10),
          TextField(
            .........
          ),
          const SizedBox(height: 20),
          TextField(
            ..........
          ),
          const SizedBox(height: 20),
          TextField(
            ..........
          ) 
        ],
      ),
    ),
  ),
);
}

Upvotes: 0

Views: 567

Answers (2)

Karim Diawara
Karim Diawara

Reputation: 11

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage 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(
            'Hello, Flutter!',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Kaushik Chandru
Kaushik Chandru

Reputation: 17762

Wrap the SingleChildScrollView with a Container and add decoration

Scaffold(
resizeToAvoidBottomInset : false,
 body: Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
   decoration: BoxDecoration(
     image : DecorationImage(
      image: AssetImage('imagePathHere'),
     )
   ),
    child: SingleChildScrollView(

    )
 )
)

Upvotes: 1

Related Questions