(Dart) Widget isn't a type - flutter

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:

Related

Flutter - Row text overflow issue

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.

Container inside row flutter

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.

How to make the page scrollable in the following structure (Flutter)

I'm building a product detail page. As the following piece of code and image shown, when there is a lot of content in the description part, the bottom overflow will occur. I'm wondering how to make the page scrollable, I've tried wrapping the Stack with SingleChildScrollView, but this is definitely not working in my case here. Can anyone help me with that? Thank you very much!!!!!
class DetailsScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: [
buildBody("path/to/image", size),
],
),
);
}
Positioned buildBody(String imagePath, Size size) {
return Positioned.fill(
child: Column(
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(vertical: 60, horizontal: 30),
color: Colors.green,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Hero(
tag: 1,
child: Image.asset(
imagePath,
width: size.width * 0.7,
),
),
),
],
),
),
),
Expanded(
child: Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: 100,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Anvesha Shandilya',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
Text(
'Owner',
style: TextStyle(
color: fadedBlack,
),
),
],
),
Expanded(child: Container()),
Text(
'Dec 16, 2020',
style: TextStyle(
color: fadedBlack,
fontSize: 12,
),
),
],
),
),
SizedBox(
height: 30,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: Text(
'A lot of content..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................',
style: TextStyle(
color: fadedBlack,
height: 1.7,
),
),
),
],
),
),
),
],
),
);
}
}
Error: Bottom Overflowed
To reproduce: Change the path/to/image, to this: A image can be used with the code:
tl;dr remove Expanded widgets -> remove Stack -> replace Column with ListView (for scrollability)
Start by removing Expanded widgets from the tree as you don't really need them. If possible, you should use mainAxisAlignment and crossAxisAlignment to position your widgets. That's exactly how you should handle placing the date next to user's name.
Expanded documentation states with which widgets you can use it:
Creates a widget that expands a child of a Row, Column, or Flex so
that the child fills the available space along the flex widget's main
axis.
Then remove Stack widget. If you don't then it will still work as Stack tries to get as big as its positioned children so it will just get as big as the Column you have inside. It's redundant.
Last but not least, replace Column with ListView. Column doesn't really care about whether it's overflowing or if it's being rendered. So if you create a Column that is bigger than the screen, it will simply display it which will cause the overflow. To fix that you could wrap it SingleChildScrollView, but I think it's more appropriate to just use ListView instead.
Here's an amazing explanation of layout system in Flutter: https://flutter.dev/docs/development/ui/layout/constraints

Flutter how to move an item to the bottom

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

Under which circumstances textAlign property works in Flutter?

In the code below, textAlign property doesn't work. If you remove DefaultTextStyle wrapper which is several levels above, textAlign starts to work.
Why and how to ensure it is always working?
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new DefaultTextStyle(style: new TextStyle(fontSize: 10.0), child: new Column(children: <Widget>[
new Text("Should be left", textAlign: TextAlign.left,),
new Text("Should be right", textAlign: TextAlign.right,)
],))
);
}
}
Both approaches, suggested by Remi apparently don't work "in the wild". Here is an example I nested both inside rows and columns. First approach doesn't do align and second approach makes application just crash:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new Directionality(textDirection: TextDirection.ltr, child: new DefaultTextStyle(
style: new TextStyle(fontSize: 10.0, color: Colors.white),
child: new Column(children: <Widget>[
new Row(children: <Widget>[
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new Align(alignment: Alignment.centerLeft, child: new Text("left")),
new Align(alignment: Alignment.centerRight, child: new Text("right")),
],)),
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new Align(alignment: Alignment.centerLeft, child: new Text("left")),
new Align(alignment: Alignment.centerRight, child: new Text("right")),
],)),
],),
/*new Row(children: <Widget>[
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left,)),
new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
],)),
new Container(color: Colors.grey, child: new Column(children: <Widget>[
new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left)),
new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
],)),
],)*/]
)));
}
}
What I get from code is
i.e. text is centered, ignoring alignment of Align element.
DefaultTextStyle is unrelated to the problem. Removing it simply uses the default style, which is far bigger than the one you used so it hides the problem.
textAlign aligns the text in the space occupied by Text when that occupied space is bigger than the actual content.
The thing is, inside a Column, your Text takes the bare minimum space. It is then the Column that aligns its children using crossAxisAlignment which defaults to center.
An easy way to catch such behavior is by wrapping your texts like this :
Container(
color: Colors.red,
child: Text(...)
)
Which using the code you provided, render the following :
The problem suddenly becomes obvious: Text don't take the whole Column width.
You now have a few solutions.
You can wrap your Text into an Align to mimic textAlign behavior
Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
),
),
),
],
)
Which will render the following :
or you can force your Text to fill the Column width.
Either by specifying crossAxisAlignment: CrossAxisAlignment.stretch on Column, or by using SizedBox with an infinite width.
Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
textAlign: TextAlign.left,
),
),
),
],
),
which renders the following:
In that example, it is TextAlign that placed the text to the left.
Specify crossAxisAlignment: CrossAxisAlignment.start in your column
In Colum widget Text alignment will be centred automatically, so use crossAxisAlignment: CrossAxisAlignment.start to align start.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(""),
Text(""),
]);
textAlign property only works when there is a more space left for the Text's content. Below are 2 examples which shows when textAlign has impact and when not.
No impact
For instance, in this example, it won't have any impact because there is no extra space for the content of the Text.
Text(
"Hello",
textAlign: TextAlign.end, // no impact
),
Has impact
If you wrap it in a Container and provide extra width such that it has more extra space.
Container(
width: 200,
color: Colors.orange,
child: Text(
"Hello",
textAlign: TextAlign.end, // has impact
),
)
Set alignment: Alignment.centerRight in Container:
Container(
alignment: Alignment.centerRight,
child:Text(
"Hello",
),
)
You can use the container, It will help you to set the alignment.
Widget _buildListWidget({Map reminder}) {
return Container(
color: Colors.amber,
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(20),
height: 80,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text(
reminder['title'],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16,
color: Colors.black,
backgroundColor: Colors.blue,
fontWeight: FontWeight.normal,
),
),
),
Container(
alignment: Alignment.centerRight,
child: Text(
reminder['Date'],
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 12,
color: Colors.grey,
backgroundColor: Colors.blue,
fontWeight: FontWeight.normal,
),
),
),
],
),
);
}
For maximum flexibility, I usually prefer working with SizedBox like this:
Row(
children: <Widget>[
SizedBox(
width: 235,
child: Text('Hey, ')),
SizedBox(
width: 110,
child: Text('how are'),
SizedBox(
width: 10,
child: Text('you?'))
],
)
I've experienced problems with text alignment when using alignment in the past, whereas sizedbox always does the work.
You can align text anywhere in the scaffold or container except center:-
Its works for me anywhere in my application:-
new Text(
"Nextperience",
//i have setted in center.
textAlign: TextAlign.center,
//when i want it left.
//textAlign: TextAlign.left,
//when i want it right.
//textAlign: TextAlign.right,
style: TextStyle(
fontSize: 16,
color: Colors.blue[900],
fontWeight: FontWeight.w500),
),
Text(' Use textAlign: TextAlign.center',
style: TextStyle(fontWeight: FontWeight.w900,fontSize: 20,),
textAlign: TextAlign.center,)
Always use textAlign When trying to direct you text