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
Related
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 am wondering how do we make an App Bar action button like the one in the picture. It seems that adding a background or wrapping a widget on an Icon will not achieve the look of the button in the picture below.
I made a demo of what you are trying to achieve:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Text(
'Title',
),
centerTitle: true,
actions: [
// squared button/icon
Padding(
padding: const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 10.0),
child: Container(
width: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Colors.white.withOpacity(0.5),
),
child: Center(
child: Icon(
Icons.settings,
color: Colors.white,
),
),
),
),
],
),
body: .... YOUR WIDGETS ...
RESULT:
You can use an Icon inside a Container with equal width and heigth (so you obtain a square), then you can round it with BorderRadius to obtain that effect.
Of course you should use the color property of the Container to fill the background.
I want to remove white(blank) space in my application. Below Is my code .
Scaffold(
backgroundColor: Theme.of(context).primaryColor,
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.amber),
actionsIconTheme: IconThemeData(color: Colors.amber),
centerTitle: true,
title: Text(
'News App',
style: TextStyle(
fontSize: 23,
fontWeight: FontWeight.bold,
),
),
backgroundColor: Colors.transparent,
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
_showNotification();
}),
],
),
drawer: Menu(),
body: Container(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
child: swiperImage(),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(0.0),
child: newsList(),
))
],
)
],
),
),
)
Here I display Image of my output, in this image top of the display I set swiper image and in remaining portion I set List view. So, I want to remove blank space in between this two widget. So, how can I do this?
The space is inside the ListView. Add this code and it disappears in Listview.
in ListView:
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder()
)
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,
),
),
),
],
),
),
),