Related
I have a screen design, below, that the team built for an app that stores a list of names vertically down on one side, and then continues on the other.
The solution we currently have in place was to create a generated List of a fixed size, and store a counter starting at one, incrementing x-number of values on the left (10 in our example) and then continuing the count for the list generation on the right; code sample to follow.
The solution works for our very basic scenario, however, we now have a need to wrap the rendering of the widget with a StreamBuilder as we'll be dynamically collecting information from a stream on interval, to populate the table with values, which is causing us severe headaches.
We looked into a GridView, however, that only allows us vertical placement of elements (left -> right, left -> right) instead of down (left) down (right).
An example of our list generation:
List<Widget> _tableRow() {
if (_counter >= 20) {
_counter = 1;
}
List<Widget> widgets = List.generate(10, (index) {
var w = Expanded(
child: Row(
children: [
Expanded(
flex: 0,
child: Container(
alignment: Alignment.center,
width: 50,
decoration: BoxDecoration(
color: kineticOffBlack,
border: Border(
right: const BorderSide(
color: Colors.black,
width: 2,
),
bottom: (index < 9)
? const BorderSide(
color: Colors.black,
width: 2,
)
: BorderSide.none,
),
),
child: Label.headingFour('$_counter'),
),
),
Expanded(
flex: 1,
child: Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: kineticOffBlack,
border: Border(
right: const BorderSide(
color: Colors.black,
width: 2,
),
bottom: (index < 9)
? const BorderSide(
color: Colors.black,
width: 2,
)
: BorderSide.none,
),
),
child: Label.headingFour(tableNames[_counter - 1]),
),
),
Expanded(
flex: 0,
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: kineticOffBlack,
border: Border(
bottom: (index < 9)
? const BorderSide(
color: Colors.black,
width: 2,
)
: BorderSide.none,
right: const BorderSide(
color: Colors.black,
width: 2,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Label.headingFour(
scoreByMetric(
tableNames[_counter - 1], MetricType.intensity),
color: kineticGold,
textAlign: TextAlign.center,
),
const SizedBox(width: 5),
const Icon(Icons.arrow_upward, color: kineticOffBlack),
],
),
),
),
],
),
);
_counter++;
return w;
});
return widgets;
}
This block of code creates the basic layout (table + 10 rows), and is then reused again to create the right side:
Widget _buildTable() {
return Row(
children: [
Expanded(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: kineticOffBlack,
border: Border(
left: BorderSide(
color: Colors.black,
width: 2,
),
right: BorderSide(
color: Colors.black,
width: 1,
),
bottom: BorderSide(
color: Colors.black,
width: 2,
),
top: BorderSide(
color: Colors.black,
width: 1,
),
),
),
child: Flex(
direction: Axis.vertical,
children: _tableRow(),
),
),
),
Expanded(
flex: 1,
child: Container(
decoration: const BoxDecoration(
color: kineticOffBlack,
border: Border(
left: BorderSide(
color: Colors.black,
width: 1,
),
right: BorderSide(
color: Colors.black,
width: 2,
),
bottom: BorderSide(
color: Colors.black,
width: 2,
),
top: BorderSide(
color: Colors.black,
width: 1,
),
),
),
child: Column(
children: _tableRow(),
),
),
)
],
);
}
This is then use to build the table, a Row with 2x Expanded widgets, this was just what we came up with.
This works, like I said, however, we have a need to wrap the return in _buildTable() with a StreamBuilder so we could do additional manipulation on the widget as data is streamed to the application from a queuing service provided by a 3rd party vendor.
Our challenge is that we have 2x _tableRow() methods, which would need to be managed separately, when the ideal solution would be to either have a single _tableRow method that creates the desired view, or using Stream.listen() in our initState() which could, in itself be another stumbling block.
The ask here is, if any Flutter-guru out there might have a simpler solution to building the desired table, without the sorcery we had to put in place in _buildTable()?
The table design:
I've found solution for this problem with help of encubos - thanks a lot! 😊. May code can be simplified - if you resolve this in better way, please share your code.
CODE:
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey[200], width: 1.0),
top: BorderSide(color: Colors.lightBlue, width: 1.0)
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lightBlue,
border: Border.all(color: Colors.lightBlue, width: 0.0)
),
height: 100,
),
Container(
color: Colors.lightBlue,
child: Container(
width: double.infinity,
height: 72,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[200], width: 0.0),
color: Colors.grey[200],
borderRadius: new BorderRadius.vertical(
top: Radius.elliptical(150, 30),
),
)),
),
])
),
),
Result:
I've got problem with styling container bottom border. My goal is to rotate for 180 degrees bottom border of my top bar
Code:
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.vertical(
bottom: Radius.elliptical(150, 30)
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new InkWell(
child: new Text(
'app',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24
)
),
onTap: () {
Navigator.of(context).pushNamed('/home');
},
),
],
),
),
),
One possible way to solve this is using the same idea in your code, but applying it to the top part of a Container below
See this code and image.
You need to ajust the color: white and the heights of the containers
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: double.infinity,
height: 100,
),
Container(
color: Colors.red,
child: Container(
width: double.infinity,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.vertical(
top: Radius.elliptical(150, 30),
),
)),
),
])
Maybe you can improve this method and work from this.
Description I am creating the login screen in which I have used the Stack widget, Currently, everything works fine but only one issue of the shrinking the view. When I use the resizeToAvoidBottomPadding: false inside the Scaffold then screen shrinking disappear but another problem arise that whole screen scroll not working, please check below lines of code
class _LoginScreen extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
));
}
}
From Above code, I am getting the following screen
I have used the ListView and SingleChildScrollView but it not working properly, please check my code with SingleChildScrollView, which i have tried
class _LoginScreen extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(
child: IntrinsicHeight(
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Column(
children: <Widget>[
Expanded(
flex: 9,
child: Container(
color: Colors.blue,
child: Align(
alignment: Alignment.centerLeft,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style: TextStyle(
fontSize: 30.0,
color: Colors.white),
),
),
),
),
)),
),
Expanded(
flex: 1,
child: Container(
color: Colors.white,
),
)
],
)),
Expanded(
flex: 6,
child: Container(
color: Colors.white,
),
)
],
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
LengthLimitingTextInputFormatter(10),
],
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
inputFormatters: [
LengthLimitingTextInputFormatter(16),
],
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
],
)),
));
}
}
And From the above code getting this result by using the SingleChildScrollView
Problem:- I want to scroll the whole screen when the keyboard appears, I have used all the Listview and SingleChildScrollView but not getting the solution, please help me on it. Thanks
The problem is you're using Expanded widgets, you see expanded widgets are flexible in nature they will consume and shrink according to the available space. If you don't want that you need to specify a height.
https://i.imgur.com/wVgAUlN.mp4
class StacScroll extends StatefulWidget {
StacScroll({Key key}) : super(key: key);
#override
_StacScrollState createState() => _StacScrollState();
}
class _StacScrollState extends State<StacScroll> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Container(
height: double.infinity,
width: double.infinity,
// margin:
// EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
child: RotatedBox(
quarterTurns: 3,
child: Container(
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"Login !!",
style:
TextStyle(fontSize: 30.0, color: Colors.white),
),
),
)),
),
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image(
image: new AssetImage("images/logo.png"),
color: null,
height: 100.0,
width: 100.0,
fit: BoxFit.scaleDown,
alignment: Alignment.center,
),
SizedBox(
height: 20.0,
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Please enter mobile number")),
SizedBox(
height: 10.0,
),
TextField(
obscureText: true,
keyboardType: TextInputType.visiblePassword,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, width: 2.0),
),
hintText: "Password")),
SizedBox(
height: 3.0,
),
Align(
alignment: Alignment.topRight,
child: Text(
"Forgot Password?",
style: TextStyle(fontSize: 12.0),
)),
SizedBox(
height: 3.0,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
color: Colors.blue,
child: const Text(
'Login',
style: TextStyle(
fontSize: 15.0, color: Colors.black45),
),
)
],
),
),
),
],
),
),
));
}
}
Thanks #Nadeem by which problem has resolved
Whenever we want to scroll the full screen when keyboard appear then we should not use the Expand widget for it.I was also doing the same mistake, for the other user i have modified the code for full scroll when keyboard appear, I have used the MediaQuery for it,Please check my below code of it.
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _LoginScreen();
}
}
class _LoginScreen extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Login"),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: MediaQuery.of(context).size.height * 0.3,
),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.59,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3),
child: Container(
margin: EdgeInsets.only(top: 70.0),
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Enter your username')),
TextFormField(
decoration: InputDecoration(labelText: 'Password')),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Colors.yellow,
child: Text("Submit",
style: TextStyle(color: Colors.blue)),
onPressed: () {},
)
],
),
)),
Center(
child: Card(
color: Colors.yellow,
elevation: 8,
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * .25),
child: Container(
child: Center(
child: Text(
"Radhe",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
)),
height: MediaQuery.of(context).size.height * .1,
width: MediaQuery.of(context).size.width * .3,
),
),
)
],
),
),
),
);
}
}
Please check the output of it.
I am using the Slidable Widget which works pretty well, but there is a strange behaviour while sliding my container. Here is the code and a GIF to show the vertical lines that should not appear.
edit:
I use this slide functionality within my friendslist. Therefore i call the createSlidable() within a loop. Within the Slidable Widget there is another method to create the child container getFriendContainer().
Widget getFriendContainer(Friend friend, int i) {
return Container(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 20, bottom: 10.0),
decoration: BoxDecoration(
color: Color.fromRGBO(13, 13, 56, 1.0),
borderRadius: i==0 ? BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
) : null,
),
child: Row(
children: <Widget>[
Expanded(
flex: 15,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(9.0),
height: 40.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color.fromRGBO(119, 119, 136, 1.0), width: 0.5),
),
child: Image.asset('assets/icon.png', width: 70.0, height: 70.0, color: Color.fromRGBO(119, 119, 136, 1.0),),
),
],
),
),
Expanded(
flex: 70,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"${friend.name}",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
color: Colors.white,
),
)
),
],
),
),
Expanded(
flex: 15,
child: friend.muted ? friendMutedIcon(friend) : Container(),
),
],
),
);
}
Widget createSlidable(Friend friend, int i) {
return Slidable(
actionPane: SlidableDrawerActionPane(),
controller: _slidableController,
actionExtentRatio: 0.15,
child: ...,
secondaryActions: <Widget>[
SlideAction(
color: getFriendContainer(Friend friend, int i),
onTap: () {
},
child: Container(
height: 50.0,
width: 100.0,
decoration: BoxDecoration(
color: ...,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(25.0),
bottomLeft: const Radius.circular(25.0),
),
),
child: Icon(Icons.volume_off, color: ...,),
),
),
SlideAction(
color: ...,
onTap: () {
},
child: Container(
height: 50.0,
width: 100.0,
color: ...,
child: Icon(Icons.delete, color: ...,),
),
),
],
);
}
I would appreciate any kind of help.
I found a solution for this. Using the IconSlideAction Widgets instead of SlideAction the issue is solved.
I can't properly see a text written inside textfield
In addition when I reach the end of the TextField my text vanishes
I solve it by wrapping TextField in Expanded Widget it worked till today
https://imgur.com/XjsWqwX
SizedBox(
height: device.height * 39 / 812,
width: double.infinity,
child: Container(
padding: EdgeInsets.all(7),
margin: EdgeInsets.only(top: 7),
decoration: BoxDecoration(
border: new Border.all(color: Color.fromRGBO(49, 80, 175, 0.36)),
color: Color.fromRGBO(249, 248, 255, 1),
borderRadius: new BorderRadius.all(
Radius.circular(7.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 7, right: 10),
child: CheckBox(
null,
false,
Colors.white,
),
),
Container(
alignment: Alignment.bottomCenter,
width: 300,
// height: 30,
color: Colors.red,
child: TextFormField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
],
),
),
);
Try to wrap your textfield with Flexible widget as follows
Flexible(
child: Container(
padding: EdgeInsets.fromLTRB(3.0, 3.0, 3.0, 12.0),
child: TextFormField (
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
),
)
)