Flutter — установить фоновое изображение

В этой статье мы собираемся реализовать, как установить фоновое изображение в теле скаффолда. Образец изображения приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2: Импорт пакета материалов

Добавление пакета материалов , который дает нам возможность использовать важный метод и вызывает метод runApp в основной функции, которая будет вызывать наше приложение.

import "package:flutter/material.dart";
void main() {
  runApp(RunMyApp());
}

Шаг 3: Создайте класс RunMyApp , который не будет иметь состояния, потому что никаких изменений не требуется. Это также возвращает виджет MaterialApp, который предоставляет компоненты материала для создания флаттер-приложения.

class RunMyApp extends StatelessWidget {
 const RunMyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(primarySwatch: Colors.green),
     debugShowCheckedModeBanner: false,
     home:
   );
 }
}

Шаг 4: Создание виджета Scaffold

Дайте свойство home , и может появиться виджет скаффолда со свойствами AppBar и body . AppBar позволяет нам указать заголовок AppBar, цвет, начальный и конечный значок. тело принимает виджет DecoratedBox , который далее принимает изображение и дочернее свойство.

home: Scaffold(
  appBar: AppBar(
      title: Text("Set Background Image"),
  ),
  body: DecoratedBox(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/img.png"), fit: BoxFit.cover),
          ),
          child: Center(
              child: FlutterLogo(
            size: 200,
          )),
        ),
),

У виджета «Украшенная коробка» есть декорация и дочерние свойства. украшение далее берет BoxDecoration и берет изображение актива.

Окончательный код

Выход

Показано фоновое изображение с логотипом флаттера над ним.