i need to make a row inside of it i write the date in square then the tite of task and in the end of the row i added it a container in which i'm going to add the time .
but i get an error in the container
too many positional arguments: 0 expected, but 1 found.
can't we put a container inside the row ?
and as a design is it good ? how can i improve it i just need to show date task title and time
Widget build(BuildContext context) {
return Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20.0), //or 15.0
child: Container(
height: 60.0,
width: 60.0,
color: Color(0xffFF0E58),
child:
Center(
child: Text('27 juillet ' ,
style:TextStyle(
fontWeight: FontWeight.bold,
fontSize:16, )
,),
)
),
),
SizedBox(
width: 20.0,
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Task tille',
style:TextStyle(
fontWeight: FontWeight.bold,
fontSize:16,
)
),
],
)
],
Container(
width: 40.0,
height: 20.0,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(30.0),
),
alignment: Alignment.center,
child: Text('8/34' , style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
) ,
No i just forget to close the ] of the row after the container that is the error
Okay, so your return type is Row(), that means, once the children: [Widgets here] is closed, you cannot add more widgets later. So my suggestion is to make the return type of 'Widget build' to Container() then add container's child as Column(), then use row within column's children.
Related
using this code i am getting text overflow error.
How to resolve this?
Scaffold(
backgroundColor: MyColor.bgLightColor,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
Container(
height: 20,
width: 24,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/current_outlet_icon.png'),
fit: BoxFit.fill,
)),
),
Text(
"Current Outlet",
style: textStyleWith12500(MyColor.darkGreyColor),
)
],
),
),
Expanded(
child: Row(
children: [
Image.asset(
"assets/location_pin.png",
height: 18,
width: 18,
color: MyColor.primaryRedColor,
),
Text(
"WTC Tower, Los Angeless sbdjkds jsbksdb kcbk", // here
style: textStyleWith12600(MyColor.blackColor),
),
],
),
)
],
)
],
)),
)
this is my text style and others textstyle is like this
TextStyle textStyleWith12500(Color color) {
return TextStyle(
fontWeight: FontWeight.w500,
fontSize: MyFontSizes.t12Size,
fontStyle: FontStyle.normal,
color: color);
This can be solve in two ways. One is using overflow attribute and another is wrapping with widget.
Overflow attribute with ellipse type will solve it with dots are end which means there are more text.
Wrapping with Flexible :
Flexible(
child: Text(
'WTC Tower, Los Angeless sbdjkds jsbksdb kcbk',
style: textStyleWith12600(MyColor.blackColor)
),
)
This will send long text to next line and will not get overflow issue. Hope it helps.
I want to display
i dont know the name of this kind of visualization.
Right now,
I have 3 data here(sum, net, cancel)
The right side will display is cancel number, the left side display is net number inside the stacked bar
with this bar, user will immediately know the sum number by (net + cancel)
is there some kind of package that can help me to display this bar
Here is the widget builder that you want. Maybe the MediaQuery is a bad choice. But you can use any other sizing options.
Widget _buildProgress(BuildContext context, int progress, int limit) {
return SizedBox(
height: 30,
width: double.infinity,
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
color: Color(0xFF038918),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 20),
child: Text(
'$limit',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
Container(
width: MediaQuery.of(context).size.width / limit * progress,
decoration: const BoxDecoration(
color: Color(0xFFe40808),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
alignment: Alignment.center,
child: Text(
'$progress',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
],
),
);
}
So, I am trying to put multiple objects into a body for which I used Dart's Stack function. While doing that I am getting this error. I am new to Dart and I am still learning about it's data types.
I have two questions mainly -
What are the data types that I can put inside the Stack function?
Is this an efficient way in Dart to add multiple objects in a body:?
For your reference I am attaching a code below -
body: Stack(
children: [Align(
alignment: Alignment(0, 0),
child: Text('Test?',
style: TextStyle(
fontSize: 28.0,
color: Colors.black87,
letterSpacing: 1.0,
fontFamily: 'Quicksand',
),//TextStle
),//Text
),//Align
Column(
children: <widget>[
Container(
padding: EdgeInsets.all(20),
color: Colors.cyan,
child: Text('What\'s up')
),//Container
],//<Widget>
),//Column
]
),
Error: 'widget' isn't a type.
children: <widget>[
^^^^^^
Try it without the <widget>
Column(
children:[
Container(
padding: EdgeInsets.all(20),
color: Colors.cyan,
child: Text('What\'s up')
),
],
),
more information about stack function - https://api.flutter.dev/flutter/widgets/Stack-class.html
Stack is not a function, it creates a stack layout of widgets[means bind with a lot of children].
The list literal type 'List' isn't of expected type 'List'. The list's type can be changed with an explicit generic type argument or by changing the element types.
you need not define it as a widget. Remove <widget>
Stack(children: [
Align(
alignment: Alignment(0, 0),
child: Text(
'Test?',
style: TextStyle(
fontSize: 28.0,
color: Colors.black87,
letterSpacing: 1.0,
fontFamily: 'Quicksand',
), //TextStle
), //Text
), //Align
Column(
children: [
Container(
padding: EdgeInsets.all(20),
color: Colors.cyan,
child: Text('What\'s up')), //Container
], //<Widget>
), //Column
])
in Stack you should put widgets. or a function that returns a widget. the data type here is a widget.
for the body you have to add the widget to or a function that returns a widget. so the efficient way to add multiple items to the body is to use widgets that are able to take multiple children such as stack, column
Try below code just remove in column refer Stack widget here
Stack(children: [
Align(
alignment: Alignment(0, 0),
child: Text(
'Test?',
style: TextStyle(
fontSize: 28.0,
color: Colors.black87,
letterSpacing: 1.0,
fontFamily: 'Quicksand',
), //TextStle
), //Text
), //Align
Column(
children: [
Container(
padding: EdgeInsets.all(20),
color: Colors.cyan,
child: Text('What\'s up')), //Container
], //<Widget>
), //Column
]),
Result of your screen:
I am trying to make my UI scrollable but when i add the SingleChildScrollView i get this white screen not showing anything at all.I should erase the Column from the begining?Use a container?I already search on internet but i don't know what to add.
Here is my code, please tell me what i can erase or add to make it work ..
class _UserProfilesState extends State<UserProfiles> {
#override
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Padding(
padding:
EdgeInsets.symmetric(horizontal: 10.0, vertical: 40.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
iconSize: 30.0,
color: Colors.black,
onPressed: () => Navigator.pop(context),
),
])),
Positioned(
left: 24,
top: MediaQuery.of(context).size.height / 6.5 - 28,
child: Container(
height: 84,
width: 84,
//profilepic
child: CircleAvatar(
radius: 10,
backgroundImage: NetworkImage(widget.avatarUrl != null
? widget.avatarUrl
: "https://icon-library.com/images/add-image-icon/add-image-icon-14.jpg"),
),
),
),
Positioned(
right: 24,
top: MediaQuery.of(context).size.height / 6.5 + 16,
child: Row(
children: <Widget>[
Container(
height: 32,
width: 100,
child: RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ChatScreen(
serviceProviderId:
widget.serviceProviderId,
userName: widget.userName,
avatarUrl: widget.avatarUrl,
)));
},
color: Colors.black,
textColor: Colors.white,
child: Text(
"Message",
style: TextStyle(fontWeight: FontWeight.bold),
)),
),
SizedBox(
width: 16,
),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://lh3.googleusercontent.com/Kf8WTct65hFJxBUDm5E-EpYsiDoLQiGGbnuyP6HBNax43YShXti9THPon1YKB6zPYpA"),
fit: BoxFit.cover),
shape: BoxShape.circle,
color: Colors.blue),
),
],
),
),
Positioned(
left: 24,
top: MediaQuery.of(context).size.height / 4.3,
bottom: 0,
right: 0,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.userName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 22,
)),
SizedBox(
height: 4,
),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
widget.address == "default"
? "No Address yet"
: "${widget.address}",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
)),
Padding(
padding: const EdgeInsets.all(1.0),
child: Text(
"${widget.categoryName}",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
)),
],
),
))
],
))
],
),
),
);
}
}
Using Spacer() might also cause this issue
The reason why your UI became white is that SingleChildScrollView allows it child to take as much space as possible. In your Column, one of your children is Expanded, Expanded tries to take as much space as possible. You are making your UI take an infinite amount of space because of that. That's the reason why you are seeing a white screen. The solution here would be to remove Expanded.
according to me and the knowledge I have this happened because the singlechildscrollview here tries to take as much height as it can take so It is creating an issue to solve this wrap the singlechildscrollview in a container and give height&width to the container it solved in my case
Thanks...
I faced similar issues, but after much research I got it working, by ensuring that the body of the scaffold be a Container that defines it's height and width, or Column. After which you can wrapped your any of these with a SingleChildScrollView.
However, in an attempt to insert an Expanded widget as child element, the expanded widget will look for bounded heights of it's parents/root element. And if it doesn't found any, it will thrown an error. A good example is if the root element is a column or a container with an unbounded height. Which is your case, looking at your code
I have this two items that once needs to appear in the middle but the other other needs to move to the bottom.
import 'package:flutter/material.dart';
class WelcomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'K',
style: TextStyle(
fontSize: 200,
color: Colors.white,
decoration: TextDecoration.none,
fontStyle: FontStyle.italic,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text('hello')],
)
],
),
);
}
}
This is how it looks.
I want to move the Hello Text to the bottom. How can I do that?
You need to use two things for that, to make it work more efficiently. These are:
Expanded Class -> This will provide space, that is, takes up the remaining space
Align class -> This will help you to align the item
Please Note: Align(), itself, cannot aligns, the item, unless space is given. If you just use the Align(), you will not see any change, cos Text('Hello') looks for space, but no space is there.
Code
Container(
width: double.infinity, // <-- Takes up total width of the device
height: double.infinity, // <-- Takes up the total height of the device
color: Colors.blue,
child: Column(
children: [
Expanded(
flex: 2, // <-- Flex takes care of the remaining space ratio
child: Center(
child: Text(
'K',
style: TextStyle(
fontSize: 200,
color: Colors.white,
decoration: TextDecoration.none,
fontStyle: FontStyle.italic,
),
)
)
),
Align(
alignment: Alignment.bottomCenter,
child: Text('Hello', style: TextStyle(color: Colors.white, fontSize: 17.0))
)
]
)
)
Result
If you don't want your K text to move on top, you would have to use Stack. This way, your widget inside can position themselves anywhere they want.
Stack(
alignment:Alignment.center,
children:[
Text("K"),
Align(
alignment:Alignment.bottomCenter,
child:Text("hello"),
),
]
),
Take a look at the stack widget here: https://www.youtube.com/watch?v=liEGSeD3Zt8
return Container(
color: Colors.blue,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Spacer(),
Text(
'K',
style: TextStyle(
fontSize: 200,
color: Colors.white,
decoration: TextDecoration.none,
fontStyle: FontStyle.italic,
),
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text('hello')],
)
],
),
);
how about this way? add two Spacer