Normal Appbar with image background in Flutter

Question

I am new in a flutter. Kindly don't mind if this question is weird. I need a background image in AppBar. I have found on the internet and got the solution with a widget SliverAppBar. I need the image background image in normal appear. I found there is no property of image or background image in AppBar. Can anyone help me with this?
Thanks! Darshan.

Answer 1

welcome to stackoverflow.
I have made this demo earlier for understanding. Kindly follow the below example code.

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"),
      ),
    );
  }
}

Output:

Conclusion
the property called "flexibleSpace" is what you are looking for the background image.