如何在flutter中为widget添加背景图片

问题描述 投票:0回答:2

尝试在 flutter 应用程序中为小部件添加背景图像,但我不知道如何添加它。我是颤振的新手。所以,如果有人知道请帮助找到解决方案。

登录.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(
            ..........
          ) 
        ],
      ),
    ),
  ),
);
}
flutter dart flutter-layout
2个回答
1
投票

用Container包裹SingleChildScrollView并添加装饰

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(

    )
 )
)

0
投票
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,
            ),
          ),
        ),
      ),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.