I'm new in flutter and I want to make a round container. I have done this but I don't know how to adjust the value to adapt it. Is there a better solution? Thanks in advance.
Widget Cube() {
return Container(
width: 70, height: 70,
child: Container(
width: 64, height: 64,
decoration: BoxDecoration(
color: CalendarColor.blue,
borderRadius: BorderRadius.all(
Radius.circular(32),
)
),
),
);
}
what I want is like this.
Container(
decoration: BoxDecoration(
shape: BoxShape.circle //This will make container round
)
)
Is there a better solution?
How about FoatingActionButton?
FloatingActionButton(
backgroundColor: Colors.blue,
elevation: 0.0,
child: Text("15", style: TextStyle(color: Colors.white)),
onPressed: () {})
You can also use RawMaterialButton for more options like this:
RawMaterialButton(
elevation: 2.0,
fillColor: Colors.black,
shape: CircleBorder(),
onPressed: () {});
},
)
Related
Please help to change the code
I'm new to Dart & flutter and need some help with Migrating from RaisedButton to ElevatedButton. How does the styling code for the elevatedButton of this RaisedButton look like
I really need to fix this code, please can someone help I am having a hard time migrating from Raisedbutton to Elevatedbutton.I don't know what to do with padding, color, and textColor.
if (widget.icon != null || widget.iconData != null) {
textWidget = Flexible(child: textWidget);
return Container(
height: widget.options.height,
width: widget.options.width,
child: RaisedButton.icon(
icon: Padding(
padding: widget.options.iconPadding ?? EdgeInsets.zero,
child: widget.icon ??
FaIcon(
widget.iconData,
size: widget.options.iconSize,
color: widget.options.iconColor ??
widget.options.textStyle.color,
),
),
label: textWidget,
onPressed: onPressed,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(widget.options.borderRadius),
side: widget.options.borderSide ?? BorderSide.none,
),
color: widget.options.color,
colorBrightness:
ThemeData.estimateBrightnessForColor(widget.options.color),
textColor: widget.options.textStyle.color,
disabledColor: widget.options.disabledColor,
disabledTextColor: widget.options.disabledTextColor,
elevation: widget.options.elevation,
splashColor: widget.options.splashColor,
),
);
}
return Container(
height: widget.options.height,
width: widget.options.width,
child: RaisedButton(
onPressed: onPressed,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.options.borderRadius ?? 28),
side: widget.options.borderSide ?? BorderSide.none,
),
textColor: widget.options.textStyle.color,
color: widget.options.color,
colorBrightness:
ThemeData.estimateBrightnessForColor(widget.options.color),
disabledColor: widget.options.disabledColor,
disabledTextColor: widget.options.disabledTextColor,
padding: widget.options.padding,
elevation: widget.options.elevation,
child: textWidget,
),
);
}
}
To style an ElevatedButton use:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
child: const Text('Login'),
)
I need a circular OutlinedButton with an elevation but that property is not available for that widget. I'm trying to create a circle outline with a shadow and wrap it in a GestureDetector to achieve the same behavior but all options that I have tried have the shadow all the way to the center of the circle or don't have any shadow in the inner part of the circle.
This is the output that I'm looking for:
How can I achieve this?
Try This Code:
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(20),
child: IconButton(
onPressed: () {},
iconSize: 200,
icon: const Icon(
Icons.circle_outlined,
shadows: [Shadow(blurRadius: 70)],
),
color: Colors.blue,
),
),
);
}
you can use a standard OutlinedButton widget with a modified shape property:
class RingBorder extends CircleBorder {
const RingBorder({
this.thickness = 12,
this.color = Colors.blue,
this.shadowColor = Colors.black,
this.shadowRadius = 6,
this.paintShadowCounter = 1,
});
final double thickness;
final Color color;
final Color shadowColor;
final double shadowRadius;
final int paintShadowCounter;
#override
CircleBorder copyWith({BorderSide? side, double? eccentricity}) => this;
#override
void paint(ui.Canvas canvas, ui.Rect rect, {ui.TextDirection? textDirection}) {
final path = Path()
..fillType = PathFillType.evenOdd
..addOval(Rect.fromCircle(center: rect.center, radius: rect.shortestSide / 2 - shadowRadius))
..addOval(Rect.fromCircle(center: rect.center, radius: rect.shortestSide / 2 - shadowRadius - thickness));
final paint = Paint()..color = color;
canvas.drawPath(path, paint);
paint
..color = shadowColor
..maskFilter = MaskFilter.blur(BlurStyle.outer, shadowRadius);
for (int i = 0; i < paintShadowCounter; i++) {
canvas.drawPath(path, paint);
}
}
}
now you can use it as follows:
OutlinedButton(
style: ButtonStyle(
shape: MaterialStatePropertyAll(RingBorder(
color: Colors.orange,
paintShadowCounter: 4,
shadowRadius: 12,
)),
),
onPressed: () => print('pressed'),
child: Container(),
);
notice that all params are optional and contain some default values
you can take IconButton and take circle_outlined as icon and give shadow as per your need:
IconButton(
onPressed: () {},
iconSize: 50,
icon: const Icon(
Icons.circle_outlined,
shadows: [Shadow(blurRadius: 20)],
),
color: Colors.blue,
),
Try below code hope its help to you. I have try same like as your shared image
Container(
alignment: Alignment.topCenter,
padding: const EdgeInsets.all(20),
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.9),
spreadRadius: 6, //change on your need
blurRadius: 10,
offset: const Offset(0, 3),
)
],
),
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
border: Border.all(color: Colors.blue, width: 5),
boxShadow: const [
BoxShadow(
color: Colors.black26,
),
BoxShadow(
color: Colors.white,
spreadRadius: -10.0, //change on your need
blurRadius: 12.0,
),
],
),
),
),
),
Result->
wrap the OutlinedButton in a Container and apply a BoxShadow to the Container.
GestureDetector(
onTap: () {},
child: Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: Offset(0, 10),
),
],
),
child: OutlinedButton(
onPressed: () {},
child: Text("Button"),
),
),
)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: InkWell(
onTap: () {},
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: const BorderRadius.all(
Radius.circular(100),
),
border: Border.all(
color: Color(0xff00AEEF),
width: 3.w),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.9),
spreadRadius: 4,
blurRadius: 10,
offset: Offset(0, 3),
)
]),
child: OutlinedButton(
onPressed: () {},
child: Text("You can add Text and icon"),
),
),
),
);
}
Hello I very new to Flutter and I am trying to create a button, but I have a problem with this.
This is the code:
Align(
alignment: AlignmentDirectional(-0.03, 0.13),
child: FFButtonWidget(
onPressed: () {
print('Login pressed ...');
},
text: 'Login',
options: FFButtonOptions(
width: 130,
height: 40,
color: FlutterFlowTheme.of(context).primaryColor,
textStyle: FlutterFlowTheme.of(context).subtitle2.override(
fontFamily: 'Poppins',
color: Colors.white,
),
borderSide: BorderSide(
color: Colors.transparent,
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
),
),
This is the error:
The argument type 'BorderRadius' can't be assigned to the parameter type 'double?'.
Do you have any suggestion?
I think you are using FlutterFlow.
Here you don't need to give the border radius like this
borderRadius: BorderRadius.circular(8)
Do it like this
borderRadius: 8
This is because FlutterFlow button widget is not like the usual Flutter button widget. They are modified versions of actual Flutter widgets.
In your case, properties of FFButtonWidget is set using this class
FFButtonOptions()
This class probably takes borderRadius as a double value and internally sets it like this
borderRadius: BorderRadius.circular(8)
So you have to give the required borderRadius as a double value.
The borderRadius field in the FFButtonOptions require a double parameter. Try
borderRadius: 8.0
It is hard to say, because I do not know how the FFButtonWidget looks like. Normally, your way of setting the border radius would be good for material widgets, for instance:
Align(
alignment: AlignmentDirectional(-0.03, 0.13),
child: Container(
width: 130,
height: 40,
decoration: BoxDecoration(
color: FlutterFlowTheme.of(context).primaryColor,
borderRadius: BorderRadius.circular(8),
),
child: TextButton(
onPressed: () {
print('Login pressed ...');
},
child: Text('Login'),
style: ButtonStyle(
textStyle: FlutterFlowTheme.of(context).subtitle2.override(
fontFamily: 'Poppins',
color: Colors.white,
),
),
),
),
),
Probably the FFButtonWidget takes a double parameter and finally transforms it into
borderRadius: BorderRadius.circular(8.0)
But if you want to use material widgets, you can check how the buttons work in Flutter here.
I have the problem that the Raised Button is no longer a usable Button in Flutter so I have to replace it with a elevated Button for example.
But when I try to convert it to an elevated Button it gives me an error with the color and shape Property. They seem to belong to the: style Button Style() but I can't convert them. Can someone help me with that.
The code for the Raised Button was:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: RaisedButton(
child: Text(
"Gruppen Id kopieren",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () => _copyGroupId(context),
color: Color.fromRGBO(245, 168, 0, 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Theme.of(context).secondaryHeaderColor,
width: 2,
),
),
),
),
You can set ButtonStyle for ElevatedButton which uses MaterialStateProperty. Now you can set color (or other properties) by checking the state, for example if button is disabled, use
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey.shade600;
}
return Color.fromRGBO(245, 168, 0, 1);
},
),
or you can set a color for all the states like this:
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith(
(states) => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Theme.of(context)
.secondaryHeaderColor,
width: 2,
),
),
),
backgroundColor: MaterialStateProperty.all(
const Color.fromRGBO(245, 168, 0, 1),
),
),
onPressed: () => _copyGroupId(context),
child: const Text(
"Gruppen Id kopieren",
style: TextStyle(
color: Colors.white,
),
),
),
You can check the buttons#context
So now instead of RaisedButton we need to useElevatedButton
Similarly, to make an ElevatedButton look like a default RaisedButton:
final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
onPrimary: Colors.black87,
primary: Colors.grey[300],
minimumSize: Size(88, 36),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(2)),
),
);
ElevatedButton(
style: raisedButtonStyle,
onPressed: () { },
child: Text('Looks like a RaisedButton'),
)
Ref and from restoring-the-original-button-visuals
I tried to put a border to a container like this code:
Container(
padding: EdgeInsets.all(15.sp),
decoration: BoxDecoration(
// color: Colors.yellow,
border: Border.all(
color: kPrimaryColor,
width: 7,
style: BorderStyle.solid,
),
),
child: QrImage(
data: controller.generatedCode,
version: QrVersions.auto,
size: 300.0,
),
),
The code above gives me a complete border
the border of the QR code, I want to implement a border like it
Try this. It will work.
Container(
child: Text(
'This is a Container',
textScaleFactor: 2,
style: TextStyle(color: Colors.black),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.green, spreadRadius: 3),
],
),
height: 50,
),
I found it, using dotted_border package:
Widget get customBorder {
Path customPath = Path()
..moveTo(0, 0)
..lineTo(0, 25)
..moveTo(0,0)
..lineTo(25, 0)
..moveTo(75,0)
..lineTo(100,0)
..lineTo(100,25)
..moveTo(0,75)
..lineTo(0, 100)
..lineTo(25, 100)
..moveTo(100,75)
..lineTo(100, 100)
..lineTo(75,100)
;
return DottedBorder(
customPath: (_) => customPath,
color: Colors.indigo,
dashPattern: [1, 1],
strokeWidth: 2,
child: Container(
height: 100,
width: 100,
color: Colors.green.withAlpha(20),
),
);
}