How to remove divider line between ddrawer and the list - flutter

How to remove divider line between ddrawer and the list?
I have next code:
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
),
),
child: Text('Settings'),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("Blue Print"),
),
],
),
);
that gives next drawer:

use container instead of drawer header widget and give decoration accordingly ,
Container(
width: MediaQuery.of(context).size.width,
height: 100,
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
)),
child: Text('Settings',).paddingSymmetric(vertical: 20, horizontal: 20))

You can try this code for your Ui:
But one issue is bottom edge is not perfect circular but bottom Divider gone.
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50),
),
child: DrawerHeader(
decoration: BoxDecoration(
color: Colors.blueGrey,
),
child: Text('Settings'),
),
),
alternative solution:
Drawer(
child: ListView(
children: [
Container(
height: 200,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
'Settings',
style: TextStyle(fontSize: 22),
)),
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40),
),
),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("Blue Print"),
),
],
),
)

Related

How to remove UserAccountsDrawerHeader outline on flutter

I'm learning flutter.
I used the UserAccountsDrawerHeader widget using the Drawer widget, but when setting Radius, unnecessary line appears below.
How can you remove it?
Here's my code
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
child: Image.asset('assets/nyancat_bg.png'),
backgroundColor: Colors.white,
),
accountName: Text('NYAN CAT'),
accountEmail: Text('nyancat#abc.com'),
onDetailsPressed: () {
debugPrint("arrow is clicked");
},
decoration: BoxDecoration(
color: Colors.indigo[400],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0))),
)
],
),
),
screenshot
Use a ClipRRect to make the border radius. Like so:
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
child: UserAccountsDrawerHeader(
currentAccountPicture: CircleAvatar(
child: Image.asset('assets/nyancat_bg.png'),
backgroundColor: Colors.white,
),
accountName: Text('NYAN CAT'),
accountEmail: Text('nyancat#abc.com'),
onDetailsPressed: () {
debugPrint("arrow is clicked");
},
decoration: BoxDecoration(
color: Colors.indigo[400],
),
),
)
Use ClipRRect
ex)
drawer: Drawer(
child: ListView(
// padding: EdgeInsets.zero,
children: [
ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0)),
child: UserAccountsDrawerHeader(
margin: EdgeInsets.zero,
currentAccountPicture: CircleAvatar(
child: Image.asset('assets/nyancat_bg.png'),
backgroundColor: Colors.white,
),
accountName: Text('NYAN CAT'),
accountEmail: Text('nyancat#abc.com'),
onDetailsPressed: () {
debugPrint("arrow is clicked");
},
decoration: BoxDecoration(
color: Colors.indigo[400],
// borderRadius: BorderRadius.only(
// bottomLeft: Radius.circular(20.0),
// bottomRight: Radius.circular(20.0)),
),
),
),
],
),
),
안녕하세요!
https://open.kakao.com/o/gsshoXJ 로 오시면 더 자세하고 많은 이야기를 나누실 수 있습니다.

Reduce the width of only one border of OutlinedButton. Flutter

How can I reduce the width of only one border of OutlinedButton? I need this so that the 2 buttons that are next to each other look like one. Now there is a thick border between the two buttons. I want it to be like this
Code:
ButtonBar(
buttonPadding: EdgeInsets.zero,
children: [
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: theme.primaryColor),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
),
onPressed: () => {},
child: IconSvg.asset('assets/icons/add.svg'),
),
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: theme.primaryColor),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
),
onPressed: () => {},
child: IconSvg.asset('assets/icons/add.svg'),
),
],
),
Wrap the button inside a container, you can add border to only specified side.
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 7.0, color: statusColor),
),
left: BorderSide(
width: 7.0, color: statusColor),
),
),
I created a Container and then assigned the 2 OutlinedButton buttons in children of the Row widget inside the Container. Using BoxDecoration, we can set custom widths and colours to each side too.
I didn't have images for + and - so I used a Text widget for both of them.
ButtonBar(
alignment: MainAxisAlignment.start,
buttonPadding: EdgeInsets.zero,
children: [
// container
Container(
decoration: BoxDecoration(
// ---- can also set border widths
border: Border.all(
color: Colors.red,
),
// ---- set border radius
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
topRight: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
),
),
// ---- Row with the 2 buttons
child: Row(
children: [
// ---- 1st Button '+'
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
bottomLeft: Radius.circular(4))),
),
onPressed: () => {},
child: Text('+',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.black,
)),
),
// ---- 2nd Button '-'
OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(4),
bottomRight: Radius.circular(4))),
),
onPressed: () => {},
child: Text('-',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.black,
)),
),
],
),
),
],
)
it works for me
Container(
decoration: BoxDecoration(
border: Border.all(
color: theme.primaryColor
),
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
child: ButtonBar(
buttonPadding: EdgeInsets.zero,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: theme.primaryColor,
),
),
),
child: IconSvg.asset('assets/icons/widgets/plus.svg'),
),
Container(
padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
child: IconSvg.asset('assets/icons/widgets/plus.svg'),
),
],
),
),

Left shape inside a card

I am trying to do this card. But I don't know how to the green shape part. Any suggestions?
Inside a row create a container and give it DecorationBox and some radius to upper and bottom left corners and a second child as text. You can modify the following example code according to your needs.
Container(
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5))),
height: 20,
width: 20,
),
Text('data'),
],
)),
Exactly how I want it.
class NotificationBanner extends StatelessWidget {
final Radius radius = Radius.circular(10.0);
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
Container(
height: 100,
width: 8,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: radius,
bottomLeft: radius,
),
),
),
Expanded(
child: Container(
height: 100,
decoration: BoxDecoration(
color: kLightBlack,
borderRadius: BorderRadius.only(
topRight: radius,
bottomRight: radius,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Some pretty message',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 20.0),
),
),
)),
),
],
),
);
}
}

How to display a text at the bottom left of the Image

I want to display a text at the bottom left if the image to be like as the below figure:
and this the below code is related:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/city.dart';
class ProvinceItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
final city = Provider.of<City>(context, listen: false);
// final cart = Provider.of<Cart>(context, listen: false);
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
splashColor: Colors.transparent,
onTap: () => {},
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.6),
offset: const Offset(2.5, 2.5),
blurRadius: 16,
),
],
),
margin: EdgeInsets.all(2),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
),
child: Image.asset(
city.cityImage,
fit: BoxFit.cover,
),
),
),
),
);
}
}
I have just create a list of Grid widget and as every list of grid item have a grid item just shown like the previous code...
as I need the best suggestion for this Grid item as it only contains just an image and a text with some of shadows..
Stack widget will do the trick for you.
Stack(
children: <Widget>[
InkWell(
splashColor: Colors.transparent,
onTap: () => {},
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.6),
offset: const Offset(2.5, 2.5),
blurRadius: 16,
),
],
),
margin: EdgeInsets.all(2),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
),
child: Image.asset(
city.cityImage,
fit: BoxFit.cover,
),
),
),
),
Container(
margin: EdgeInsets.only(left: 20, bottom: 20),
child: Align(
alignment: Alignment.bottomLeft,
child: Text(
'Text',,
style: TextStyle(color: Colors.white, fontSize: 20),
)),
),
],
),

How to make one side circular border of widget with flutter?

I'm trying to build one side circular border with Container widget in flutter.
I have searched for it but can't get any solution.
Container(
width: 150.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(30.0),
/* border: Border(
left: BorderSide()
),*/
color: Colors.white
),
child: Text("hello"),
),
Use BorderRadius.only and provide the sides
return Center(
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
),
border: Border.all(
width: 3,
color: Colors.green,
style: BorderStyle.solid,
),
),
child: Center(
child: Text(
"Hello",
),
),
),
);
Output
You can achieve this by following code for creating your widget :
return Container(
width: 150.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.zero,
bottomLeft: Radius.zero,
bottomRight: Radius.zero,
),
),
child: Text(
"hello",
),
);
This way you can have your top left sided circular border with Container widget in flutter.
Another way of doing this is to use the ClipRRect widget.
Simply wrap your widget with ClipRRect and give a radius.
You can specify which corner you want to make round.
ClipRRect(
borderRadius: BorderRadius.only(topRight: Radius.circular(10)),
child: Container(
height: 40,
width: 40,
color: Colors.amber,
child: Text('Hello World!'),
),
);
If you want one side of a container rounded you want to use BorderRadius.only and specify which corners to round like this:
Container(
width: 150.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0)),
color: Colors.white),
child: Text("hello"),
),
Also You can do it with 'Shape Function'.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15.0),
topLeft: Radius.circular(15.0),
),
also do can do as follows,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(30.0),
bottomLeft: const Radius.circular(30.0),
),
You can also set the radius of each side.
margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
fromLTRB= from Left, Top, Right, Bottom