Develop Reference

how do i align the icon totally in between the circular button?

Container(
height: 55,
width: 55,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
vertical: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
]),
child: OutlinedButton(
onPressed: () {
_controller.forward();
widget.onPress();
},
style: const ButtonStyle(
alignment: Alignment.centerLeft,
backgroundColor: MaterialStatePropertyAll(Colors.white),
shape: MaterialStatePropertyAll(CircleBorder()),
),
child: const Icon(
Icons.view_carousel_outlined,
size: 35,
color: Colors.black,
),
),
),
as you can see the icon is not aligned properly ...
i have tried every method possible, i used stack, positioned, tried to give it a padding, margin etc. tried to put it in boxfit and tried everything else, any ideas why this is happening ?

Changing the alignment to Alignment.center and using EdgeInsets.zero worked fine for me.
Container(
height: 55,
width: 55,
decoration: const BoxDecoration(
shape: BoxShape.circle,
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
vertical: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
],
),
child: OutlinedButton(
onPressed: () {
/* _controller.forward();
widget.onPress(); */
},
style: const ButtonStyle(
alignment: Alignment.center,
padding: MaterialStatePropertyAll(EdgeInsets.zero),
backgroundColor: MaterialStatePropertyAll(Colors.white),
shape: MaterialStatePropertyAll(CircleBorder()),
),
child: const Icon(
Icons.view_carousel_outlined,
size: 35,
color: Colors.black,
),
),
),

Ok, so i fixed it, basically removed a lot of styling in the container and styled the border in the outline button itself.
Here is the code:
Container(
decoration: const BoxDecoration(shape: BoxShape.circle, boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
]),
child: OutlinedButton(
onPressed: () {
_controller.forward();
widget.onPress();
},
style: const ButtonStyle(
side: MaterialStatePropertyAll(BorderSide(width: 2.0)),
padding: MaterialStatePropertyAll(EdgeInsets.all(20.0)),
backgroundColor: MaterialStatePropertyAll(Colors.white),
shape: MaterialStatePropertyAll(CircleBorder()),
),
child: const Icon(
Icons.view_carousel_outlined,
size: 35,
color: Colors.black,
),
),
),

OutlinedButton has its own constraints, margin, padding, tapTargetSize, visualDensity, hence, your child is not getting centered inside it.
So to achieve your desired UI snippet either modify this properties
OR
Wrap your Icon with Center and use InkWell for onTap() functionality
CODE:
Container(
height: 55,
width: 55,
decoration: const BoxDecoration(
color: Colors.white, //TODO: Add Color to Container
shape: BoxShape.circle,
border: Border.symmetric(
horizontal: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
vertical: BorderSide(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(3.5, 3.5),
blurRadius: 0,
spreadRadius: -1,
),
]),
child: InkWell( //TODO: Replace OutlinedButton with InkWell
onTap: () {
_controller.forward();
widget.onPress();
},
child: const Center( //TODO: Wrap Icon with Center
child: Icon(
Icons.view_carousel_outlined,
// size: 35,
color: Colors.black,
),
),
),
),
OUTPUT:

Flutter: Stack Overlap widget with second widget

Image link
How can I push the child widget outside the stack's bound.
I want to overlap the search bar at AppBar widget.
Stack's overflow property not working what we use instead of it.
I am using the positioned widget to move on child widget to outside the stack's boundary, but it remains same I am getting issue I need solution for this.
This is my code
PreferredSize _buildAppBar() {
return PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
centerTitle: true,
elevation: 0,
backgroundColor: Colors.transparent,
flexibleSpace: Stack(
clipBehavior: Clip.none,
fit: StackFit.loose,
// alignment: AlignmentDirectional.bottomEnd,
children: [
Expanded(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('images/gym.jpg'), fit: BoxFit.cover),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
// top: 90,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
// ignore: prefer_const_constructors
boxShadow: const [
BoxShadow(color: Colors.black12, blurRadius: 5)
]),
child: TextFormField(
// controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none,
),
hintText: 'Search Your Product',
hintStyle: TextStyle(color: Colors.grey[400]),
contentPadding:
const EdgeInsets.only(left: 22, right: 12),
fillColor: Colors.white,
filled: true,
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.search,
size: 30,
))),
// obscureText: obscureText,
),
),
),
],
),
title: const Text(
'Home',
style: TextStyle(
color: Colors.white,
),
),
),
);
}

One of possilbe ways is to use CustomScrollView with SliverAppBar and Stack
Here is the link to one of the solutions

How to make keyboard open and textFormField hover over keyboard while opening Dart Flutter showModalBottomSheet?

I have an application like this:
When I press the floatActionButton below, this is what happens:
When I come to this screen, I want the keyboard to open automatically.
When I press the textFormField myself, a screen like this happens:
The keyboard is getting ahead of the textFormField. How do I prevent this?
So, when showModalBottomSheet is opened, I want both the keyboard to open automatically and the keyboard not to get in front of the textFormField. How can I do that?
I want to do like this:
Codes:
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
backgroundColor: Colors.white,
context: context,
builder: (context) {
return Container(
height: 125,
child: Column(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Add new task',
labelStyle: TextStyle(
color: Colors.black,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: TextStyle(
color: Colors.black,
),
),
)
],
),
);
},
);
Thanks in advance for the help.

Wrap your Container with another Container and give
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
and also give isScrollControlled: true in showModalBottomSheet()
Like In your example,
showModalBottomSheet(
isScrollControlled: true,
backgroundColor: Colors.white,
context: context,
builder: (context) {
return Container(
padding: EdgeInsets.only(
bottom: MediaQuery
.of(context)
.viewInsets
.bottom,
),
child: Container(
height: 125,
child: Column(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Add new task',
labelStyle: TextStyle(
color: Colors.black,
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: TextStyle(
color: Colors.black,
),
),
)
],
),
),
);
},
);

How to add width to icon without Materialbutton - Flutter

I want to display a bold icon in my app, but I don't want to use a material icon since it would display a splash effect when I press on it, and I don't want that. Is there a method to make icons wider in Flutter?
My icon:-
My desire result:-
Here is my code:-
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
Icons.add,
color: DarkBlueColor,
),
),

Try to use font_awesome_flutter.
Example code:
FaIcon(FontAwesomeIcons.plus),

You can use icons inside the text widget and assign font size, font weight, font family and package also this makes your icon bold
Text(
String.fromCharCode(CupertinoIcons.exclamationmark_circle.codePoint),
style: TextStyle(
inherit: false,
color: Colors.red,
fontSize: 30.0,
fontWeight: FontWeight.w700,
fontFamily: CupertinoIcons.exclamationmark_circle.fontFamily,
package: CupertinoIcons.exclamationmark_circle.fontPackage,
),
)

If you can achieve the effect by simply removing the splash/ripple, you can set ThemeData.splashColor to transparent.
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: Widget(), // Set your button here
);
Otherwise, if what you meant on "width" of the icon is "boldness" or "weight". Here's a workaround for that.

You can use custom icon just download the add ' + ' icon online and paste it in your assets folder.
Now use that icon like this --
Image.asset('assets/add.png', width: 25, height: 25),
Now you can set the width according to your need.
And if you want to get rid of that splash effect just set
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,

simply you can set the splash color to transparent

You can use, Container and RichText combo. As shown below.
InkWell(
child: Container(
width: 150,
height: 50,
decoration: BoxDecoration(color: Colors.green,border: Border.all(width: 1, color: Colors.green),borderRadius: BorderRadius.circular(25) ),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(
Icons.add,
color: Colors.indigo,
size: 34,
),
Text(
"Add Offer",
style: TextStyle(color: Colors.indigo, fontSize: 20),
),
],
),
),
onTap: (){
doSomething();
},
),
void doSomething() {}

InkWell(
onTap: () {
print("object");
},
child: SizedBox(
child: Material(
shape: const CircleBorder(),
child: Container(
height: 50,
width: 180,
decoration: BoxDecoration(
color: Color(0xff59e7ba),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(25.0),
),
child: ClipRRect(
child: Align(
alignment: Alignment.centerLeft,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.add,
size: 40,
color: Colors.black,
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
"Add Offer",
style: TextStyle(
//set your fonts
//fontFamily: "Font2",
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
),
),
),
),
),

Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: InkWell(
onTap: () {},
child: Container(
height: 50,
width: 180,
decoration: BoxDecoration(
color: Color(0xff59e7ba),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(25.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.add,
size: 40,
color: Colors.black,
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
"Add Offer",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)
],
),
),
), // Set your button here
)

Row Widget use entire column

Try to build a custom button with X sign on the right, but when I add this to a Wrap widget, it used up the entire row.
this is the code for building the button:
Material _buildDeleteFilter(String caption, Function onTap) {
return Material(
color: Colors.orange,
borderRadius: BorderRadius.circular(5),
child: InkWell(
onTap: onTap,
splashColor: Colors.deepOrange,
child: Container(
padding: EdgeInsets.symmetric(vertical: 2, horizontal: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5)),
child: Row(
children: <Widget>[
Text(
caption,
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
),
Icon(
Icons.close,
size: 20,
color: Colors.white,
)
],
),
),
),
);
}