I want to put an icon instead of the title for appBar widget but I can't set proper height of this icon.
appBar: PreferredSize(
preferredSize: Size.fromHeight(220.0),
child: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/mobile-phone.png',
fit: BoxFit.contain,
width: 120,
height: 120,
)
],
),
elevation: 0.0,
backgroundColor: Colors.green,
brightness: Brightness.light,
),
),
The icon reaches it's maximum size about 60 (units?) despite that I set the height much more bigger and it's actual size is bigger also.
How to force height setup for the icon in appBar widget?
this should looks like this
appBar: PreferredSize(
preferredSize: Size.fromHeight(220.0),
child: AppBar(
flexibleSpace: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/mobile-phone.png',
fit: BoxFit.contain,
width: 120,
height: 120,
)
],
),
elevation: 0.0,
backgroundColor: Colors.green,
brightness: Brightness.light,
),
),
Related
I have this AppBarWidget and I need to change the arrow back logo to my custom svg icon. I'm new in flutter and I can't find how to change it.
Here is code for AppBar
return AppBar(
elevation: 0,
backgroundColor: white,
foregroundColor: black,
shadowColor: Colors.transparent,
toolbarHeight: 80,
titleTextStyle: getCustomeStyle(
fontSize: 25, fontWeight: FontWeight.w700, color: black),
title: FittedBox(
fit: BoxFit.fill,
child: SizedBox(
width: _width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title),
SvgPicture.asset("assets/images//logo/ShopIO.svg",
semanticsLabel: "ShopIO")
],
),
)),
bottom: PreferredSize(
child: Container(
color: lightGray,
height: 1.0,
width: _width - 30,
),
preferredSize: const Size.fromHeight(0)),
);
The easiest way is to override the deafult leading widget of AppBar and add your custom:
AppBar(
leading: IconButton(
icon: <whatever you like>,
// this is the default behaviour, you can change it
onPressed: () => Navigator.of(context).pop()
),
Is there a way to add a divider like this one to the top of a BottomNavigationBar()? I got it for the AppBar() as you can see below:
appBar: AppBar(
elevation: 0,
title: Text(
_views[_index]['title'],
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(10),
child: Divider(
thickness: 2,
height: 0,
),
),
),
But I wonder if there is a way to do the same with the BottomNavigationBar().
It should look like this in the end:
I just solved it like this:
body: Column(
children: [
_views[_index]['view'],
Spacer(),
Divider(
thickness: 2,
),
],
),
I just added a Divider() inside the body property under the actual content of the Scaffold() and pushed it down with a Spacer().
AppBar has the leading property
Use a colored container inside a PreferredSize widget for the AppBar widget's top
AppBar(
title: Text("Title"),
leading: PreferredSize(
child: Container(color: colors.Black, height: 5.0),
preferredSize: Size.fromHeight(5.0),
),
),
My image is inside the ListView. And I want to give custom width to my image. But width property doesn't work for me. I am able to give custom height but the width property is not working.
Here is what image looks like:
Here is the sample code:
Scaffold(
appBar: AppBar(
title: Text('Sample App'),
),
body: ListView(
children: <Widget>[
Image.network(
'https://assets.website-files.com/5e3c45dea042cf97f3689681/5e417cd336a72b06a86c73e7_Flutter-Tutorial-Header%402x.jpg',
width: 100,
height: 200,
fit: BoxFit.fill,
),
],
),
);
By wrapping your Image widget inside Center widget, you can control the width and height of the image.
Scaffold(
appBar: AppBar(
title: Text('Sample App'),
),
body: ListView(
children: <Widget>[
Center( // --> new change
child: Image.network(
'https://assets.website-files.com/5e3c45dea042cf97f3689681/5e417cd336a72b06a86c73e7_Flutter-Tutorial-Header%402x.jpg',
width: 100,
height: 200,
fit: BoxFit.fill,
),
),
],
),
);
EDIT:
If you would like to align your image other than the center, you can wrap it inside the Align widget.
Scaffold(
appBar: AppBar(
title: Text('Sample App'),
),
body: ListView(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Image.network(
'https://assets.website-files.com/5e3c45dea042cf97f3689681/5e417cd336a72b06a86c73e7_Flutter-Tutorial-Header%402x.jpg',
width: 100,
height: 100,
fit: BoxFit.fill,
),
),
],
),
);
In App bar i added search widget like this:
return Scaffold(
appBar: AppBar(
title: Container(
margin: EdgeInsets.only(top: 30),
decoration: BoxDecoration(
color: Color.fromARGB(50, 255, 255, 255),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: TextFormField(...
)),
),
),
)
],
),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: TabBar(...
I added margin from top equal 30 but search section is cropped:
How can i increase default title size in appbar?
You can use flexibleSpace instead of title.
return Scaffold(
appBar: AppBar(
flexibleSpace: Container(....
flexibleSpace works fine but another way is to use PreferredSize.
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child:AppBar(
title:Text("title"),
)
),
body:...
)
I am making a custom AppBar that has a larger height than the typical AppBar. I would like to resize the leading widget/icon as well, and take advantage of the automaticallyImplyLeading default behaviors (so the menu icons and back icons are automatically implemented).
This is the solution I thought I would implement:
class AppAppBar extends PreferredSize{
AppAppBar(String title) : super(
preferredSize: Size.fromHeight(56.0),
child: AppBar(
centerTitle: true,
title: Text(title, style: textStyle)
)) {
(child as AppBar).leading =
SizedBox(width: 30.0, height: 30.0, child: (child as AppBar).leading);
}
static const textStyle = TextStyle(fontSize: 32.0);
}
But of course this won't work because (child as AppBar).leading is final.
So in the AppBar below (text size made dramatically larger for illustration purposes), I would like to make the automatically added hamburger icon larger in comparison.
What do you think? Are there solutions for this or should I give up on the automatic icons and add them myself?
Edit: Added an image to show what I mean
You cant because it is a predefined widget.
You can work around it with a Row widget:
Scaffold(
key:_scaffoldKey,
drawer: Drawer(),
appBar: AppBar(
automaticallyImplyLeading: false
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 20, // Your Height
width: 20, // Your width
child: IconButton( // Your drawer Icon
onPressed: () => _scaffoldKey.currentState.openDrawer()),
icon: Icon(Icons.arrow_back, color: Colors.white),
),)
// Your widgets here
],
),
),
)
You need the Key to open the drawer with _scaffoldKey.currentState.openDrawer().
automaticallyImplyLeading: false will prevent the default drawer Icon.
A simple example to demonstrate Raffi Jonas answer
AppBar(
automaticallyImplyLeading: false,
title: Row(
children: [
Expanded(
child: Text('One'),
),
Center(
child: Text('Two'),
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text('Three'),
),
),
],
),
),
The leading Widget width of AppBar in Flutter can be resized using the leadingWidth property.
For Example :
AppBar(
title: const Text('Title'),
leadingWidth: 50,
leading: Container()
)
What you want is a custom app bar in Flutter. Most people try giving their own widgets in the title argument of an AppBar. But let me show you how to properly do it.
#override
Widget build(BuildContext context) => Scaffold(
appBar: _appBar(),
body: _body(),
);
//Custom AppBar
_appBar() => PreferredSize(
//kToolBarHeight: Default size used by all AppBar widgets in Flutter.
//MediaQuery...: viewPadding.top is StatusBar area. viewPadding.bottom is iPhone bottom bar.
preferredSize: PreferredSize.fromHeight(kToolBarHeight + MediaQuery.of(context).viewPadding.top),
child: Container(
child: Row(
//This will spread Row content evenly across the screen.
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
//Leading Widget
Icon(Icons.home),
//Title
Text("Hello World!"),
//Trailing Widget / Actions
Icon(Icons.home),
],
),
),
);
Widget _body() => Container(
color: Colors.blue,
);
You can set a margin for height or width.
AppBar(
leading: Container(
margin: EdgeInsets.symmetric(vertical: 15),
child: IconButton(
icon: Icon(CupertinoIcons.chevron_left),
onPressed: () {},
),
),
To use a custom appBar leading button, here is the code.
appBar: AppBar(
title: Text('hello'),
// automaticallyImplyLeading: false,
elevation: 0,
leadingWidth: 58,
actions: [
ProfileBar(),
],
leading: Container(
width: 14,
//color: Colors.yellow,
child: Row( // <--- Using row to avoid force resizing of leading
children: [
Padding( // <--- Padding to make it look more nicer
padding: const EdgeInsets.only(left: 24.0),
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: SvgPicture.asset( // <-- Using SvgPicture package
'assets/svg/icons/backbtn.svg',
width: 24,
height: 24,
),
),
),
],
),
),
),