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()
),
Related
I have a code that is responsible for displaying the characteristics of the device (the code is presented below. I have shortened it for readability.)
My problem:
in the body: if there are long names, then the display of elements is confused (as in the photo). How can I get the elements to display correctly even with long titles?
in appbar: how can I make the text size of the device name change depending on the size of the text itself (so that the name of the device can be seen in full)
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(device.name),
leading: IconButton(
icon: Icon(Icons.favorite_border),
color: Colors.black,
iconSize: 40.0,
onPressed: () {}
),
iconTheme: const IconThemeData(color: Colors.white, size: 40),
actions: [
IconButton(
icon: const Icon(Icons.phonelink_setup, size: 40.0,),
color: Colors.black,
onPressed: () {}),],
backgroundColor: Colors.white,
centerTitle: true,
),
body: SingleChildScrollView(
child: Align(
alignment: Alignment.topCenter,
child: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800, maxHeight: 400),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),),
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:'),
trailing: Text('${device.brand}')),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
],
),
),
),
]
)
)
)
);
}
}
You can use FittedBox widget! For your example, if you want to resize your AppBar text based on width.
appBar: AppBar(
title: const FittedBox(
fit: BoxFit.fitWidth,
child: Text('Very very veryveryvery veryveryvery longname'),
),
),
Then, your text size will be adjusted accordingly. You can do the same with the device name.
Another option for you for the device name might be using overflow and softwrap to make it multiple lines without adjusting the font size.
appBar: AppBar(
title: const Text(
'Very very veryveryvery veryveryvery longname',
overflow: TextOverflow.visible,
softWrap: true,
),
),
You may look at the BoxFit options here.
There is another option that you can use which is Auto_Text_Size. It's a very nice package and works very well!
you can fix the overflow by wrapping the listTile inside another single scroll
I used two circular avatar (the first one with a white background just a little bigger to create a white border).
Also the second one have the background property set to white.
However before the image is loaded I see a blue background. As you can see form the code there are no one blu widget on the back...
I wold like to have a black or white background while the widget is loading the picture.
return Scaffold(
backgroundColor: Colors.white,
body: Container(
padding: const EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: appColor,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 0,
height: 20,
),
const Center(
child: Text(
'WhyBye ',
style: TextStyle(
color: Colors.white,
fontFamily: 'Savor',
fontSize: 40,
),
),
),
const SizedBox(
width: 0,
height: 10,
),
Stack(
//& Stack contenente l'immagine del profilo.
children: [
_image != null
? CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 96,
backgroundImage: MemoryImage(_image!),
))
: CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 96,
backgroundImage: Variables.userPicUrl.isNotEmpty
? NetworkImage(Variables.userPicUrl)
: null,
)),
Positioned(
//& All'interno del precedente Stack, posizionamento dei pulsanti immagine dalla galleria/fotocamera.
bottom: -10,
left: 15,
child: IconButton(
onPressed: () {
selectImage(ImageSource.gallery);
},
icon: const Icon(Icons.photo_library_rounded),
color: Colors.white,
iconSize: 32,
),
),
Positioned(
bottom: -10,
left: 135,
child: IconButton(
onPressed: () {
selectImage(ImageSource.camera);
},
icon: const Icon(Icons.add_a_photo),
color: Colors.white,
iconSize: 32,
),
),
Following the documentation of CircleAvatar:
If a backgroundColor is not specified, the theme's ThemeData.primaryColorLight is used with dark foreground colors, and ThemeData.primaryColorDark with light foreground colors.
I think you're using the default theme (which uses blue as primary color). Try to explicitly define s transparent color to the inner circle so while it's loading you only see the color of the outer circle
I think you need to add
Blockquote
foregroundImage
ImageProvider?
The foreground image of the circle. [...]
you could decide to use a dark image
i make appBar and add a drawer to it and also search icon the problem there is padding between the icon for the Drawer and the search icon And I can't get rid of it
this the code:
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
backgroundColor: Color(0xffffffff),
elevation: 1,
toolbarHeight: 40.0,
iconTheme: IconThemeData(color: Colors.grey),
),
drawer: Drawer(
child: ListView(
children: <Widget>[],
),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Color(0xfffafafa),
child: Text("hello"),
),
);
}
}
Add this lines to remove default padding of IconButton:
IconButton(
constraints: BoxConstraints(),
padding: const EdgeInsets.all(0),),
Wrapping your search button with this will reduce the padding.
Not sure how much of the padding you wanted to remove.
SizedBox(
width: 10.0,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.search),
onPressed: () {},
),
),
Try like this
appBar: AppBar(
title: Text(title),
backgroundColor: kPrimaryLightColor,
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: Icon(
Icons.message_rounded,
size: 30.0,
),
)),
Solution 1
Just add a property called "titleSpacing" in your AppBar Tag,
Sample
appBar: AppBar(
titleSpacing: 0, //Add this line to your code
title: Text(widget.title),
leading: Icon(Icons.android),
),
Solution 2
Or wrap your title with "Transform.translate" and Add property "offset".
sample
title: Transform.translate(
offset: Offset(-30.0, 0.0),
child: Text('your app title')
),
I need This create text on Left I created simple UI using flutter. I have a problem. I need this Create
Text on Left side. I didn't add center tag to my code but when I add devider to my code the text automatically in center . I want devider but also I want this text on left align ? How can I do that ?
My code Flutter
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child: new Text('Create',style: TextStyle(fontFamily: "Montserrat", color: Colors.black))),
leading: GestureDetector(
onTap: () { },
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
backgroundColor: Colors.white,
body: GestureDetector(
child: new SingleChildScrollView(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
),
Divider(
height: 2,
color: Colors.red,
),
SizedBox(
height: 17.0,
),
Container(
// margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
child: Text('Create')
)
],
)
),
),
);
}
}
Add this line to your text container.
alignment: Alignment.centerLeft,
example:
Container(
alignment: Alignment.centerLeft,
child: Text('Create'),
)
So I've never used flutter but as a front end developer this is the insight I can offer.
There's two reasons why this could be happening. Either the text is in a container which is not left aligned or the Text object is not left aligned.
To go about fixing this the first thing I would do is put borders around everything so that I can figure out the reason for this issue. This means add style "border: 2px solid green" or any variation to the text (and possibly eventually something like text-align and also adding a border to the container itself (and eventually possibly changing its width or finding a different method to realign it)
Add this to your column
mainAxisSize: MainAxisSize.max,
and this to your text container
alignment: Alignment.centerLeft,
So all code will be like this
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: new Center(child: new Text('Create',style: TextStyle(fontFamily: "Montserrat", color: Colors.black))),
leading: GestureDetector(
onTap: () { },
child: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
),
backgroundColor: Colors.white,
body: GestureDetector(
child: new SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
),
Divider(
height: 2,
color: Colors.red,
),
SizedBox(
height: 17.0,
),
Container(
// margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
alignment: Alignment.centerLeft,
child: Text('Create')
)
],
)
),
),
);
}
}
You have to pass the container as the child of Align. If you want to align every element to the left then you can just use :
Column(
crossAxisAlignment:CrossAxisAlignment.start,
children:[])
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,
),
),
),
],
),
),
),