Flutter 中带有图像背景的普通 Appbar

Question

我是新来的扑扑。如果这个问题很奇怪，请不要介意。我需要 AppBar 中的背景图片。我在互联网上找到了一个小部件 SliverAppBar 的解决方案。我需要正常显示的图像背景图像。我发现 AppBar 中没有属性的图像或背景图像。谁能帮我这个？
谢谢！达善.

Answer 1

欢迎使用 Whosebug。
为了理解，我之前做了这个演示。请遵循以下示例代码。

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" 的属性就是您要查找的背景图片。

Flutter 中带有图像背景的普通 Appbar

Normal Appbar with image background in Flutter

appbar

dart

flutter