How can I replace the AppBar title with image logo in Flutter?
The title property takes a Widget, so you can pass any widget to it.
For example, an image added to assets
Scaffold(
appBar: AppBar(
title: Image.asset('assets/title.png', fit: BoxFit.cover),
),
body: ...
)
More info
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
height: 32,
),
Container(
padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
],
),
)
App themes are probably best long term. (Make sure you've properly added the logo image to your assets folder and updated 'pubspec.yaml' file too).
Create a folder (e.g. 'themes') in your /lib path.
Create a "style" file (e.g. 'style.dart') in that folder. (Use this file also to implement different themes for your app: colors, fonts, etc.)
Create an image widget in your 'style' file, e.g. (height, weight, path, alignment up to you):
Image appLogo = new Image(
image: new ExactAssetImage("assets/images/AppLogo.png"),
height: 28.0,
width: 20.0,
alignment: FractionalOffset.center);
In the title field of your AppBar, add 'appLogo' (or whatever you
named the widget), like this (don't forget to import your 'style' file):
child: Scaffold(
appBar: AppBar(
title: appLogo,
),
Now, if ever you need to change this logo, you simply need to edit your style.dart file with the new image path and that's it. And if you have different themes and name your widgets the same way in each style file, you'll also be able to rapidly implement different styles (e.g. 'style1', 'style2', etc.) on the fly just by importing the respective file in just a couple places.
The problem is that the AppBar does not fit it Height with the image size. To solve this problem, i've set the image and the AppBar Height (including the padding)
Here's my code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Image.asset(
"assets/images/logo_light.png",
fit: BoxFit.contain,
height: 72,
),
toolbarHeight: 88,
actions: [
IconButton(onPressed: () => {}, icon: Icon(Icons.search)),
],
),
);
AppBar(
centerTitle: true,
title: Image.asset('assets/your_logo.png', height: 32),
backgroundColor: Theme.of(context).primaryColor,
)
the above didn't quite work for me, this adds the picture background I want to the entire app bar and leaves the option to keep a title. updated for flutter/dart 2.0 null safety
Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('App Bar!'),
flexibleSpace: Image(
image: AssetImage('images/bar1.jpg'),
fit: BoxFit.cover,
),
backgroundColor: Colors.transparent,
),
body: Container()
)
Related
The AppBar in iOS has an extra space above, and so the icon doesn't look like it's aligned vertically, how do you remove the extra space above? Thanks! Please refer to screenshots below:
Code:
Scaffold(
appBar: AppBar(
toolbarHeight: 70,
backgroundColor: Colors.white,
title: SvgPicture.asset(
Assets.mainLogo,
width: 7.w,
),
centerTitle: true,
),
);
just remove toolbarHeight:70 this line
You need to use PreferredSize
appBar: PreferredSize(
preferredSize: Size.fromHeight(50.0), // here the desired height
child: AppBar(
// ...
)
),
Hi There I am working on a app where i need to use two sections in appbar one upper
1->section with logo and some Icons
2-> Search input field below the Title Section.
UI images are attached for better understanding.
you can customize the size of app bar by using toolbarHeight: 120.0 // set value
then use flexibleSpace to add column or rows
it will look something like this
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
toolbarHeight: 120.10, //set your height
flexibleSpace: SafeArea(
child: Container(
color: Colors.blue, // set your color
child: Column(
children: [
Row(
children: [Text("Logo")],
),
Text("data"), // set an icon or image
IconButton(
icon: Icon(Icons.search),
onPressed: () {}) // set your search bar setting
],
),
),
),
),
),
);
}
}
Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):
return AppBar(
title: Column(children: [
Row(children: [
Icon(Icons.menu),
Text('First row'),
const Spacer(),
Icon(Icons.person),
]),
TextFormField(),
]),
);
You can use the bottom property from the AppBar widget.
AppBar(
title: YourFirstRowWidget(),
centerTitle: true,
bottom: PreferredSize(
child: YourSearchBarWidget(),
preferredSize: null),
)
But you may want to create your own AppBar widget for a perfect result.
How to create vertical tab navigation for dashboard in flutter web and whats it the best way?
You can you a NavigationRail to get this look. It was added to flutter this year. It works almost like the bottom tab bar.
I believe you want something similiar to what is shown in the screenshot right?
If so, I would recommend you to use the Scaffold Widget and making use of the attributes appBar and drawer.
For further information about the Scaffold Widget please check this link.
Here a simple example:
In your main Widget modify the build function like this.
#override
Widget build(BuildContext context) {
GlobalKey<ScaffoldState> key = GlobalKey();
return Scaffold(
key: key,
drawer: Padding(
padding: const EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Container(
color: Colors.red,
width: 300,
child: Column(children: [Text("1"), Text("2"), Text("3")])),
),
appBar: AppBar(
toolbarHeight: 70,
elevation: 5,
centerTitle: true,
backgroundColor: Colors.black,
leading: RawMaterialButton(
child: Icon(Icons.menu),
onPressed: () => key.currentState.openDrawer(),
),
title: Container(child: Text("Title Widget")),
),
body: Container(
child: Text("Main Widget"),
));
}
The result would look like this:
It uses the background image for whole application.
So My plan is use Stack including backgroundimage and Scaffold on it.
In this code, it shows Title.png but dosent show BackGround.png
Where should I fix??
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: <Widget>[
new Image.asset('images/BackGround.png',
fit: BoxFit.cover,
),
Scaffold(
body: Center(
child: Image.asset('images/Title.png')
),
),
],
),
);
}
I think it is showing your "BackGround.png" image. But, "Title.png" image is overlay above it. That's why you're not able to view it.
To check out if it is rendered or not just replace your code as following,
home: Stack(
children: <Widget>[
Scaffold(
body: Center(
child: Image.asset('images/Title.png')
),
),
new Image.asset('images/BackGround.png',
fit: BoxFit.cover,
),
],
),
Stack always renders his first child, then second and then so on. So, in your case, whichever background you want to upload above all, should be on top.
Place your Scaffold inside Container with a background image and use Colors.transparent for Scaffold's backgroundColor property like this:
Container(
//your image here
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
//your Scaffold goes here
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(),
),
);
I have an App-Bar , where i need to place an Text below the Image in the App-Bar. The text should align directly below the below. I have tried many ways but i cannot find a way to do it. [Image of the Output i am getting now][1]
appBar:
new PreferredSize(
preferredSize: const Size.fromHeight(240.0),
child: new AppBar(
centerTitle: true,
title: Row(),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [reddish, blushish],
),
),
),
bottom: new PreferredSize(
child: new Container(
child: new Image.asset('assets/rewahub_icon.png'),
padding: const EdgeInsets.all(80.0),
),
preferredSize: const Size.fromHeight(100.0)),
),
),
I am not able to place a text below the Png file that is image file. I would like to place a text below the Image file. Please do help me with this.
[1]: https://i.stack.imgur.com/P45ya.jpg
You can wrap your image in a column and add a text widget in this column.
child: Column(
children: <Widget>[
new Image.asset('assets/rewahub_icon.png'),
Text('I got my text here'),
],
)
you can but all widgets you want to start at the same align in a column
and use MainAxisAlignment property like: MainAxisAlignment.start
you can use padding if you want some spaces around too ..