I'm trying to make this corner transparent but nothing works I can't make it rounded too. like here
I made it black but when I give it color: Color.transparent it is not changing without color: Colors.black it's white
Help pls
import 'package:flutter/material.dart';
class SlidebarMenu extends StatelessWidget {
final padding = const EdgeInsets.symmetric(horizontal: 10);
final boxBorder = const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50.0),
bottomRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0)),
);
const SlidebarMenu({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
const string = 'Logged in as: ';
const email = 'sample#domain.com';
return SafeArea(
child: Drawer(
child: Material(
child: ListView(
children: <Widget>[
Container(
color: Colors.black,
child: buildHeader(
//end work
string: string,
email: email,
),
),
],
),
),
),
);
}
Try below code hope its help to you.
Add your drawer Widget inside ClipRRect
ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(35),
bottomRight: Radius.circular(35),
),
child: Drawer(),
),
Related
i looking for this particular kind of curved container. Thank you for help.
Code example :
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(right: 16,left: 16,top: 16,bottom: 64),
height: MediaQuery.of(context).size.height*0.80,
width: MediaQuery.of(context).size.width-32,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(0),
bottomLeft: Radius.circular(MediaQuery.of(context).size.width*.4),
bottomRight: Radius.circular(32.0),
topRight: Radius.circular(0)),
),
);
}
}
I understand that making a widget reusable is good when you want to de-clutter your code but I think that it also reduces the code readibility and most often it's the properties (like padding,color,shape) of a widget (like Container,Material) which makes up the most clutter.
So, is there a way that I can make properties of a widget reusable rather than the widget itself.
For example, is there a way that I can make properties of this Material:
Material(
elevation: 4.0,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(5.0),
)),
color: Theme.of(context).primaryColorLight,
child: ...
Like this:
Material(
myMaterialProps: props,
child: ...
If you want to reuse your widget, the easiest way would be to create a custom widget, and set default values for the properties that won't change that often and make those properties optional.
To support variations of your widget, you can create factory methods that will receive only the properties that are different.
Here's a quick example (keep in mind it's just an example):
class MyWidget extends StatelessWidget {
final double elevation;
final Clip clipBehaviour;
final Color color;
final Widget child;
MyWidget(this.child, {double elevation, Clip clipBehaviour, Color color})
: elevation = elevation ?? 4,
clipBehaviour = clipBehaviour ?? Clip.hardEdge,
color = color ?? Colors.green;
factory MyWidget.withRedBorder(Widget child) {
return MyWidget(
child,
color: Colors.red,
);
}
#override
Widget build(BuildContext context) {
return Material(
elevation: 4.0,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(5.0),
)),
color: Theme.of(context).primaryColorLight,
child: child);
}
}
Is making your custom Widget fit your situation?
class MyCustomMaterial extends StatelessWidget{
const MyCustomMaterial({
required this.child,
Key? key,
}):super(key:key);
final Widget child;
#override
Widget build(BuildContext context){
return Material(
elevation: 4.0,
clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
bottomLeft: Radius.circular(30.0),
bottomRight: Radius.circular(5.0),
),
),
color: Theme.of(context).primaryColorLight,
child: child,
);
}
}
And use it as:
MyCustomMaterial(
child: ...
I am trying to set up a very simple ListView that from the top to the bottom of the screen, but right now I don't see any thing on the screen but a green background.
class _HomeScreenState extends State<HomeScreen> {
List wishlists = [Wishlist("Test1"), Wishlist("Yeet")];
#override
Widget build(BuildContext context) {
return Container(
color: Colors.lightGreen,
child: SizedBox(
height: 400,
child: new ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return new WishlistListWidget(
wishlist: wishlists[index],
);
},
itemCount: wishlists.length,
),
),
);
}
}
Wishlist is a simple Class and this is my WishlistListWidget:
class WishlistListWidget extends StatelessWidget {
final Wishlist wishlist;
const WishlistListWidget({Key key, this.wishlist}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
Container(
height: 150.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
)),
),
),
],
),
);
}
}
What am I missing here?
You're missing the Text widget in WishlistListWidget class.
class WishlistListWidget extends StatelessWidget {
final Wishlist wishlist; // this value is not being used here
const WishlistListWidget({Key key, this.wishlist}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
Container(
height: 150.0,
color: Colors.transparent,
child: new Container(
child: Text(wishlist.someProperty), // this one, it should be wishlist.someProperty
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
),
),
),
),
],
),
);
}
}
I am designing a simple screen. I want to acheive this
How can I remove the topLeft border. I try to using border side to show only one side border but it showing error not able to change the another then uniform. Did i remove the app bar then stack the widget. Kindly tell me which thing I am doing wrong.
My Code is
import 'package:flutter/material.dart';
class SendScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey =
new GlobalKey<ScaffoldState>();
return Scaffold(
drawer: Drawer(),
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
leading: IconButton(
icon: Icon(Icons.access_alarm),
onPressed: () {
_scaffoldKey.currentState.openDrawer();
}),
actions: [
Container(
width: 50,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: const DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.black,
// width: 8,
),
borderRadius: BorderRadius.circular(12),
),
),
SizedBox(
width: 20,
)
],
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
// bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(80),
),
),
title: Text('Sliver AppBar'),
),
),
body: Column(
children: [
Container(
height: 80,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(80),
),
),
child: Row(
children: [],
),
)
],
),
);
}
}
This is a known "issue". The problem is that once you assign a border radius, you don't know where the border starts and where it ends. Therefore flutter can't assign a border color to only certain border.
The only trick which works for you situation of everything I tried is to stack 2 container, the one on the back acting to do the border.
Here is the implementation:
import 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SendScreen(),
),
);
}
}
class SendScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
return Scaffold(
drawer: Drawer(),
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: AppBar(
leading: IconButton(
icon: Icon(Icons.access_alarm),
onPressed: () {
_scaffoldKey.currentState.openDrawer();
}),
actions: [
Container(
width: 50,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: const DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.black,
// width: 8,
),
borderRadius: BorderRadius.circular(12),
),
),
SizedBox(
width: 20,
)
],
shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.only(
// bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(80),
),
),
title: Text('Sliver AppBar'),
),
),
body: CustomRectangle(
borderSize: 20,
borderColor: Colors.grey[300],
height: 80.0,
borderRadius: 80.0,
child: Container(
color: Colors.red,
),
),
);
}
}
class CustomRectangle extends StatelessWidget {
final Widget child;
final double height;
final double borderSize;
final double borderRadius;
final Color borderColor;
const CustomRectangle({
Key key,
#required this.height,
#required this.borderSize,
#required this.borderRadius,
#required this.child,
#required this.borderColor,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
child: Container(
height: height + borderSize,
decoration: BoxDecoration(
color: borderColor,
),
),
),
ClipRRect(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
child: Container(
height: height,
child: child,
),
),
],
);
}
}
Look at CustomRectangle it is my custom widget which solve your problem. You can expand from there.
I am wondering why a wrapped Inkwell widget is not working on a simple flutter screen. The code is the following:
class SearchButtonState extends State<SearchButton> {
bool folded = true;
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 400),
width: folded ? 56 : 200,
height: 56,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Color(0xFF88B4E0),
boxShadow: kElevationToShadow[6],
),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !folded
? TextField(
decoration: InputDecoration(
hintText: 'Search',
hintStyle: TextStyle(color: Colors.blue),
border: InputBorder.none),
)
: null,
),
),
Container(
//fixing splash
child: Material(
type: MaterialType.transparency,
child: Inkwell(
//Fixing the BorderRadius of the Splash
BorderRadius: BorderRadius.only(
topLeft: Radius.circular(folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Icon(
folded ? Icons.search : Icons.close,
color: Color(0xFF88B4E0),
),
),
onTap: () {
setState(() {
folded = !folded;
});
},
)))
],
));
}
}
The error is the following: "The argument type 'dynamic' can't be assigned to the parameter type 'widget'". I would appreciate if someone know why do I get this error, since the Inkwell is wrapped.
Change this code Inkwell to InkWell and BorderRadius: to borderRadius:
child: Material(
type: MaterialType.transparency,
child: InkWell(
//Fixing the BorderRadius of the Splash
borderRadius: BorderRadius.only(
...