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.
-
Does this answer your question? Make AppBar transparent and show background image which is set to whole screenAskNilesh– AskNilesh2020-05-06 11:50:14 +00:00Commented May 6, 2020 at 11:50
-
@NileshRathod sir, I guess making transparent appbar require lot more other widgets in screen. I am looking the solution with minimal widget building.darshan mathur– darshan mathur2020-05-06 11:54:37 +00:00Commented May 6, 2020 at 11:54
Add a comment
|
1 Answer
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"),
),
);
}
}
Conclusion
the property called "flexibleSpace" is what you are looking for the background image.
