Обычная панель приложений с фоном изображения во Flutter

Question

Я новенький в трепете. Пожалуйста, не возражайте, если этот вопрос будет странным. Мне нужно фоновое изображение в AppBar. Нашел на inte rnet и получил решение с виджетом SliverAppBar. Мне нужно, чтобы фоновое изображение выглядело нормально. Я обнаружил, что в AppBar нет свойства изображения или фонового изображения. Кто-нибудь может мне с этим помочь?
Спасибо! Даршан.

Answer 1

добро пожаловать в stackoverflow.
Я сделал эту демонстрацию ранее для понимания. Пожалуйста, следуйте приведенному ниже примеру кода.

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AppBarWithImage(),
    );
  }
}

class AppBarWithImage extends StatefulWidget {
  @override
  _AppBarWithImageState createState() => _AppBarWithImageState();
}

class _AppBarWithImageState extends State<AppBarWithImage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('App Bar with image background'),
        flexibleSpace: Image(
          image: NetworkImage(
            "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
          ),
          fit: BoxFit.cover,
        ),
        backgroundColor: Colors.transparent,
      ),
      body: Center(
        child: Text("Sample Text"),
      ),
    );
  }
}

Вывод:

Заключение
свойство под названием «flexibleSpace» - это то, что вы ищете для фонового изображения.