how to set background image on flutter-CodePudding

This is my pubspec.yaml

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
uses-material-design: true

  # To add assets to your application, add an assets section, like this:
assets:
      - images/img_rectangle1.jpg

I have established an assets folder and included it with my.png picture; but, I am experiencing difficulty with the widgets.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Korean vocabulary related to traits"),
      centerTitle: false,
      backgroundColor:  const Color(0xFFEC74C8),
    ),
    body: Row(
      children: [
        Expanded(
            child: ListView.builder(
              itemCount: koreanNameList.length,
              itemBuilder: (context, index) {
                KoreanItem item = koreanNameList[index];
                return Draggable<KoreanItem>(
                    data: item,
                    dragAnchorStrategy: pointerDragAnchorStrategy,
                    feedback: KoreanNameCard(item: item),
                    child: KoreanNameCard(item: item));
              },
            )),
        Expanded(
            child: ListView.builder(
              itemCount: englishanswers.length,
              itemBuilder: (context, index) {
                return buildEnglishanswerColumn(englishanswers[index]);
              },
            )),
      ],
    ),
  );
}

Where exactly should the container that holds the background picture be placed, then?

I have tried to use

AssetImage

but it is not showing on my app.

CodePudding user response：

You need to specify the assets on pubspec.yaml

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

Here is an example:

flutter:
  assets:
    - assets/images/background.png

To include all assets under a directory, specify the directory name with the / character at the end:

flutter:
  assets:
    - assets/
    - assets/images/

sample using image asset

Container(
  height: double.infinity,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/splash/background.png"),
      fit: BoxFit.cover,
    ),
  ),
  child: const Center(
    child: Text(
      'Hello World!',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

Reference: Adding assets and images

CodePudding user response：

For setting an image as the background, use this Container widget as the body of your Scaffold.

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/images/image.jpg"),
            fit: BoxFit.cover,
      ),
  ),

  child: child
)

Replace image.jpg with your image name.