Related
I am having an issue with flutter forms.
Basically I have 3 simple rows added to a Stack. The last one contains a form. Below that there are 'Pinned' elements by Adobe XD, but the row containing the form is floating at the top of the screen... I would expect it to be arranged below the two first rows.
You can see the issue in the screenshot below. The form is on top of the image, but I want it to be above the 2 white lines which I want to replace by functional form fields.
Where am I going wrong? I have put the form in a separate Widget.
LoginPage.dart
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: [
0.4,
1
],
colors: [
Colors.black,
Color(0xff7d060b),
])),
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.transparent,
body: SafeArea(
child: Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
/* Image.asset(
'assets/images/Logo.png',
height: 100,
width: 250,
),*/
Image.asset(
'assets/images/fewturelogo.png',
height: 50,
),
Container(
padding: const EdgeInsets.only(left: 30.0),
child: IconButton(
color: Colors.white,
icon: const Icon(Icons.not_listed_location_rounded),
onPressed: () {
print('Hello');
showDialog(
context: context,
barrierDismissible: false,
// user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Was ist Rentalsplanet?'),
content: new SingleChildScrollView(
child: new ListBody(children: [
new Text(
'Hier erscheinen Informationen über Rentalsplanet')
]),
),
actions: [
new ElevatedButton(
child: Text('Alles klar!'),
onPressed: () {
Navigator.of(context).pop();
})
],
);
});
},
)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.only(top: 70.0),
child: Image.asset(
'assets/images/SplashImageLogin.png',
scale: 1.1,
),
),
],
),
Row(children: [
Container(
margin: const EdgeInsets.only(top: 70.0),
child: SizedBox(width: 100, child: LoginForm()),
)
]),
],
),
),
),
);
LoginForm.dart
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
children: <Widget>[
new Flexible(
child: TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
),
ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
// Add TextFormFields and ElevatedButton here.
],
),
);
}
because you are using stack... stack is not an easy thing to work with and in your case, if you don't have to use it replace it with Column and your problem will be fixed.
if not alignment in Stack or fractionaloffset or Transform.translate will help you
Transform.translate will fix your problem but it might cause some responsive issues
There is a white space around my pop up view that is implemented in onLongPress(). Can't seem to get rid of it. The code is as follows:
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
debugPrint('Container clicked');
},
onLongPress: () {
showMenu(
context: context,
position: RelativeRect.fromLTRB(0, 0, 0.0, 0.0),
items: <PopupMenuEntry>[
PopupMenuItem(
child: getPopUpView(context),
),
],
);
},
child: Column( ...
And in the getPopUpView method we have :
Container getPopUpView(BuildContext context) {
return Container(
width: 278,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: BPColor.grey1,
),
child: Column(
children: [
popUpViewRows(
context, AppLocalizations.of(context).markText, Assets.iconStar),
Divider(
color: BPColor.black,
),
popUpViewRows(context, AppLocalizations.of(context).archiveText,
Assets.iconArchive),
Divider(
color: BPColor.black,
),
popUpViewRows(
context, AppLocalizations.of(context).selectText, Assets.iconStar),
Divider(
color: BPColor.black,
),
popUpViewRows(context, AppLocalizations.of(context).function2Text,
Assets.iconStar),
Divider(
color: BPColor.black,
),
popUpViewRows(context, AppLocalizations.of(context).deleteText,
Assets.iconDelete),
],
),
);
}
In the popUpViewRows method we have :
GestureDetector popUpViewRows(BuildContext context, String text, String icon) {
return GestureDetector(
onTap: () {
debugPrint('$text clicked');
},
child: Row(
children: [
Center(
child: Text(
text,
style: BPFonts.popUpViewtextStyle,
),
),
Spacer(),
SvgPicture.asset(
icon,
),
],
),
);
}
The Output looks like this:
As you see, There is a white space around the popup view. I am not sure why this border looking thing is present. And showMenu does not seem to have a border attribute.
Okay. I was able to figure it out. Simpler than I thought.
All I had to do was add a color attribute to the showMenu, can't believe it took me so long to think of that.
So I did this :
showMenu(
color: BPColor.grey1,
context: context,
position: RelativeRect.fromLTRB(0, 0, 0.0, 0.0),
items: <PopupMenuEntry>[
PopupMenuItem(
child: getPopUpView(context),
),
],
);
},
I'm working with flutter. I want to make a CupertinoAlertDialog(iOS style is required). My problem is UI designers require the background color of the alert dialog should be #F0F0F0. But I can only adjust its theme into dark or light(e.g. following picture). The code I completed is placed below.
showCupertinoDialog(
context: context,
builder: (BuildContext context){
return Theme(
data: ThemeData.dark(),
child: CupertinoAlertDialog(
title: Text('Title'),
content: Text('Some message here'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancle'),
),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
),
);
}
);
Is that possible? Thanks for any advice.
If I recall correctly, the background color for CupertinoAlertDialog is hardcoded. However, you can create a custom dialog that can change the background color of it as well as the functions of the buttons.
You need to create a type Dialog for the showDialog function instead of showCupertinoDialog:
Dialog customDialog = Dialog(
backgroundColor: Color(0xfff0f0f0), // your color
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)), // change 40 to your desired radius
child: CustomAlertDialog(),
);
I also created a stateless widget called CustomAlertDialog, but if you don't want to, you can replace the CustomAlertDialog() with its content.
class CustomAlertDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 150,
child: Column(
children: [
Expanded(
flex: 2,
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey, width: 1),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Center(
child: Text(
"Title",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
),
Container(
child: Center(
child: Text("Some message here"),
),
),
],
),
),
),
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
flex: 1,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.grey, width: 1),
),
),
child: Center(
child: Text("Cancel"),
),
),
onTap: () {
Navigator.of(context).pop(); // replace with your own functions
},
),
),
Expanded(
flex: 1,
child: GestureDetector(
child: Container(
child: Center(
child: Text("OK"),
),
),
onTap: () {
Navigator.of(context).pop(); // replace with your own functions
},
),
),
],
),
),
],
),
);
}
}
Lastly, replace your whole showCupertinoDialog with this showDialog function:
showDialog(
barrierDismissible: true, // set false if you dont want the dialog to be dismissed when user taps anywhere [![enter image description here][1]][1]outside of the alert
context: context,
builder: (context) {
return customDialog;
},
);
Result: https://i.stack.imgur.com/cV13A.png
I am using the below code but not able to achieve the desired result, I am new to the flutter world so let me know where to improve to get the desired result. Here is the source code of what I have done.
return Expanded(
child: GridView.builder(
controller: _scrollController,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: albumList.length,
itemBuilder: (BuildContext context, int index) {
return buildRow(index);
},
),
);
Widget buildRow(int index) {
return AlbumTile(
index: index,
albumList: albumList,
deleteAlbum: _deleteAlbum,
);
}
This the Album Tile
class AlbumTile extends StatelessWidget {
AlbumTile(
{Key key,
#required this.index,
#required this.albumList,
#required this.deleteAlbum})
: super(key: key);
final int index;
final List<Album> albumList;
final Function deleteAlbum;
#override
build(BuildContext context) {
String thumb;
if (albumList.elementAt(index).thumbUrl != "") {
thumb = WEBSERVICE_IMAGES +
albumList.elementAt(index).userId.toString() +
'/' +
albumList.elementAt(index).id.toString() +
'/' +
albumList.elementAt(index).thumbUrl;
} else {
thumb = "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg";
}
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
new AlbumPage(tabIndex: index, albumList: albumList),
),
);
},
child: Container(
// height of the card which contains full item
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width * 0.28,
// this is the background image code
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
// url is my own public image url
image: NetworkImage(thumb),
),
borderRadius: BorderRadius.circular(12.0)),
// this is the item which is at the bottom
child: Align(
// aligment is required for this
alignment: Alignment.bottomLeft,
// items height should be there, else it will take whole height
// of the parent container
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 0.0),
height: MediaQuery.of(context).size.height * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Text() using hard coded text right now
Text(albumList.elementAt(index).name,
style: TextStyle(
fontSize: 18.5,
color: Colors.white,
fontWeight: FontWeight.w500)),
SizedBox(height: 3.0),
Text(albumList.elementAt(index).photos.toString() +' photos',
style: TextStyle(
fontSize: 12.5,
color: Colors.white,
fontWeight: FontWeight.w500))
],
),
),
// pop-up item
PopupMenuButton(
icon: Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
deleteAlbum(albumList.elementAt(index).id, index);
},
),
],
),
),
),
),
);
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
new AlbumPage(tabIndex: index, albumList: albumList),
),
);
},
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Stack(
fit: StackFit.loose,
children: <Widget>[
ClipRRect(
borderRadius: new BorderRadius.circular(8.0),
child: FadeInImage.assetNetwork(
height: 1000,
placeholder: kPlaceHolderImage,
image: thumb,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Text(
albumList.elementAt(index).name,
style: TextStyle(
color: Colors.white,
fontSize: 18.5,
),
textAlign: TextAlign.left,
),
),
),
PopupMenuButton(
icon: ImageIcon(
AssetImage("graphics/horizontal_dots.png"),
color: Colors.white,
),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
deleteAlbum(albumList.elementAt(index).id, index);
}),
],
),
),
],
),
),
);
}
}
Thank you in advance.
Welcome to the flutter. Amazing platform to start you career on building cross-platform mobile applications.
My code will look a bit different to you, but trust me, this will work out for you.
Please note: You need to change some parts, like changing the image url for NetworkImage(), onTap function, Text() content etc. But not much changes in the Whole Widget code. So please look for those, and make changes accordingly. You will get there :)
GestureDetector(
onTap: () => print('Works!'), // <-- onTap change, I have used print()
child: Container(
// height of the card which contains full item
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width * 0.28,
// this is the background image code
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
// url is my own public image url
image: NetworkImage('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg')
),
borderRadius: BorderRadius.circular(12.0)
),
// this is the item which is at the bottom
child: Align(
// aligment is required for this
alignment: Alignment.bottomLeft,
// items height should be there, else it will take whole height
// of the parent container
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 0.0),
height: MediaQuery.of(context).size.height * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Text() using hard coded text right now
Text('Potraits', style: TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.w500)),
SizedBox(height: 3.0),
Text('150 photos', style: TextStyle(fontSize: 17.0, color: Colors.white, fontWeight: FontWeight.w500))
]
)
),
// pop-up item
PopupMenuButton(
icon: Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
//your function
}
)
]
)
)
)
)
)
Result
EDITS FOR WHOLE UI
So, the change required is in your buildRow Widget. You just need to give some paddings on your sides, and you are pretty much solid. Let me know
Widget buildRow(int index) {
return Padding(
padding: EdgeInsets.all(10.0),
child: AlbumTile(
index: index,
albumList: albumList,
deleteAlbum: _deleteAlbum,
)
);
}
And if you are unsatisfied with the spacings, just keep playing with the EdgeInsets painting class. I hope that helps. Please let me know. :)
edit:
I made "I AM" bright neon green, but its mixing with the button colors to a dark green.
I want to display text over two buttons that cover the whole screen, 1 top half and 1 bottom half. I want text to display in the middle of the screen, kind of covering part of each button.
This is my code for the buttons:
Widget build(BuildContext context) {
return Scaffold(
body: Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: poorText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: richText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
],
),
),
);}
I have tried to use stack, but it says too many positional arguments are being used. How would I keep my column layout and layer text over the buttons? If there is another way without column that still allows makes the buttons work that's fine too. Thanks!
You can use a Stack widget to achieve that:
Note. Because the two buttons are aligned to the center, you have to align the text widget also to the center so it can be placed directly ob=ver the two button.
Check the code below:
It works perfectly:
Widget build(BuildContext context) {
return Scaffold(
// use a stack widget
body: Stack(
children: [
// text to display over buttons
Align(
// set alignment to center to place it over the buttons
alignment: Alignment.center,
child: Text(
'Text you want to display over the buttons',
// give it your style
style: TextStyle(
),
),
),
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: poorText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: richText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
],
),
),
],
),
);}
I hope this helps.
Use 2 Columns widget within a Stack widget. The code below achieves exactly what you want if I understood you well.
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.red,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
],
),
Column(
children: <Widget>[
Container(
// set alignment to center to place it over the buttons
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('Text 1')),
),
Container(
// set alignment to center to place it over the buttons
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('Text 2')),
),
],
)
],
);
}