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.
Related
I am trying to make a chat page on flutter that looks like this: top bar + bottom textField and send button. I have been able to make both the top appbar and the textfield with the send button, but I have not been able to position the textfield at the bottom of the page successfully. I have tried things like Align and Expand, footer, BottomNavigationBar.
The current version of the code I have pasted only shows the top Appbar. If I take out the child Row and the send button, I have a textfield at the bottom of the page. For some reason, as soon as I add the child Row in order to be able to add the send button, the entire textfield does not show up on the screen. I would appreciate any help.
Note: Since I am trying to make a chat screen, I want the middle section to be scrollable (while the top and bottom remain), where I can later add the chat bubbles.
Screenshot of code because of the bad editing of code snippet
Continuation of code snippet
"""
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorConstant.whiteA700,
// Top bar
appBar: AppBar(
backgroundColor: ColorConstant.deepOrange300,
title: Text("Match's Name",style: AppStyle.textstyleinterregular15.copyWith(
fontSize: getFontSize(15))),
),
body: Column(
children: [
Expanded(child: SingleChildScrollView(
child: Column(
children: [
// Bubbles
],
),
),
),
Container(
height: 45,
width: double.infinity,
color: ColorConstant.whiteA700,
child: Row(children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "Message...",
hintStyle: TextStyle(color: ColorConstant.bluegray100),
border: OutlineInputBorder(
borderSide: BorderSide(color: ColorConstant.bluegray100)
),
)
),
SizedBox(width: 15,),
// Send Button
FloatingActionButton(
onPressed: (){},
child: Icon(Icons.send,color: ColorConstant.whiteA700,size: 18,),
backgroundColor: ColorConstant.lightBlueA100,
elevation: 0,
),
]),
);
],
),
);
"""
Try this one...
bottomNavigationBar: Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
height: 45,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
children: [
Expanded(
child: const TextField(
decoration: InputDecoration(
hintText: "Message...",
hintStyle: TextStyle(color: Colors.blue),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue)),
),
),
),
SizedBox(
width: 15,
),
// Send Button
MaterialButton(
color: Colors.red,
onPressed: () {},
child: Icon(
Icons.send,
color: Colors.white,
size: 18,
),
// backgroundColor: ColorConstant.lightBlueA100,
elevation: 0,
),
],
),
),
),
Wrap TextField with Expanded widget it'll work for you.
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 imported [sliding up panel][2] from pub.dev and everything is good except for one issue. I'm looking for a way to center the 'blue circle' vertically. (in between 'red appbar' and 'buttom slider') I tried wraping the code with 'center' or using mainaxisalignment but it doesn't work. Other things I tried which I found on google just gave me an errors. Please help.
Thanks in advance
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(200),
child: AppBar(
backgroundColor: Colors.pinkAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(100))
),
flexibleSpace: Container(
alignment: Alignment.center,
child: Text(
'Red AppBar',
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.bold
),
),
),
),
),
body: SlidingUpPanel(
renderPanelSheet: false,
panel: _floatingPanel(),
collapsed: _floatingCollapsed(),
body: ElevatedButton(
onPressed: () {},
child: Text('Blue Circle'),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(20),
),
)
),
);
Widget _floatingCollapsed() {
return Container(
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0)),
),
margin: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
child: Center(
child: Text(
"buttom slider",
style: TextStyle(color: Colors.white),
),
),
);
}
Widget _floatingPanel() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(24.0)),
boxShadow: [
BoxShadow(
blurRadius: 20.0,
color: Colors.grey,
),
]
),
margin: const EdgeInsets.all(24.0),
child: Center(
child: Text("LEVEL INFO"),
),
);
}
Also, what could be the best way to give margin to the 'blue circle' so it won't touch the far left and far right side of the screen?
The SlidingUpPanel's body is using Stack, also getting full screen size. You can check
#override
Widget build(BuildContext context) {
return Stack(
alignment: widget.slideDirection == SlideDirection.UP
? Alignment.bottomCenter
: Alignment.topCenter,
children: <Widget>[
//make the back widget take up the entire back side
widget.body != null
? AnimatedBuilder(
animation: _ac,
builder: (context, child) {
return Positioned(
top: widget.parallaxEnabled ? _getParallax() : 0.0,
child: child ?? SizedBox(),
);
},
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: widget.body,
),
)
You can play with Align on body and wrapping with SizedBox. You can use LayoutBuilder or MediaQuery to provide size.
body: SlidingUpPanel(
renderPanelSheet: false,
panel: _floatingPanel(),
collapsed: _floatingCollapsed(),
body: Align(
alignment: Alignment(0.0, -.3), //play with it
child: SizedBox(
width: 200,
height: 200,
child: ElevatedButton(
As per the documentation of sliding_up_panel, the body represents the widget that lies underneath the sliding panel and it automatically sizes itself to fill the screen. So it occupies full screen. Since you expanded AppBar to 200 unit, the body Widget was pushed down, hence you are seeing the centre point also pushed down by 200 unit. If you change the body height to occupy full screen from the start, by setting the Scaffold property extendBodyBehindAppBar with true, you will place the widget in the correct centre point.
if you add the below line immediately after the Scaffold. You will get desired result.
return Scaffold(
extendBodyBehindAppBar:true,
So I have this card:
and I want to make it so the blue box looks like this:
how would I do this?
my code is this:
child: Card(
elevation: 5.0,
child: ListTile(
onTap: () {},
title: Text(tasks[index].title),
subtitle: Text(tasks[index].description, overflow: TextOverflow.ellipsis, maxLines: 1,),
leading: ClipRRect(
borderRadius: BorderRadius.circular(2.0),
child: SizedBox(
height: 60.0,
width: 10.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.blue,
),
),
),
)
),
),
Check the DevTools here https://flutter.dev/docs/development/tools/devtools/overview
They are super useful especially for when there is something wrong with the layout of your widgets, you can see exactly what is wrong woth that widget.
Im guessing its the SizedBox width:10.
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:[])