How can i apply a gradient like here to the app background? Can you see the gradient moving down on that the app bar and the scaffold body just like they were one widget and not 2 widgets that each has his own color?
You need to use container as background to your scaffold to add a gradient. You can use Opacity widget as well to make container or any widget transparent. But here is the exact solution what you are looking for:
Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF282a57), Colors.black],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20, 50, 20, 0),
child: Container(
child: Row(
children: <Widget>[
Icon(Icons.menu,color: Colors.white,),
Spacer(),
Text("Expense",style: TextStyle(color: Colors.white,fontSize: 18,)),
Spacer(),
Icon(Icons.clear, color: Colors.white,)
],
),
),
),
],
),
)
Related
I wanted to get same dynamic height of right widget to left widget in Row Widget.Below I was attaching screenshot of my expected design. Could you help how can do that.
We can see right side date widget is expanding , So I wanted to get the height of left side widget(blue and purple) same as right side widget.
If left side image widget is not possible to expand the height then is any there any possible to create custom widget, Any solution is welcome.
Thanks in advance.
Row(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
constraints: BoxConstraints(
minHeight: 40.0,
maxHeight: 50.0,
/*maxWidth: 10,
minWidth: 10,*/
),
padding: EdgeInsets.only(top: 0.0),
//height: 98,
width: 20,
child: ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
colors: [Color(0xff12229F), Color(0xff615FDF)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(bounds);
},
child: ImageIcon(
AssetImage('assets/images/reservations/small_timeline.png'),
color: Colors.white,
size: 40,
),
),
),
),
Expanded(
child: Column(
children: [
pickup(data),
dropoff(data),
],
),
),
],
),
After Using IntrinsicHeight
I was unable to remove default padding around the icons
IntrinsicHeight(
child: Padding(
padding: const EdgeInsets.only(top: 0,bottom: 0),
child: Row(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 4),
child: Icon(
Icons.fiber_manual_record,
size: 18,
color: Color(0xff11219E),),
),
Flexible(
child: Container(
decoration: BoxDecoration(
gradient:
LinearGradient(colors: [Color(0xff11219E), Color(0xff6F6AEB)]),
),
width: 4,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Icon(
Icons.fiber_manual_record,
size: 18,
color: Color(0xff6F6AEB),),
),
],
),
Expanded(
child: Column(
children: [
pickup(data),
dropoff(data),
],
),
),
],
),
),
),
It seems to me that Expanded could be used to expand your widget to full availabe height.
Keep in mind that the Row width will distribution will also expand, since no flex parameter is provided.
You already have an Expanded on the right widget so just add the other one and provide a flex value for both of them.
Some thing like 10 for left and 90 for right should work for you :)
so I'm trying to make a registration page with multi fields for name and password and email etc.
my problem is that i couldn't make the page scrollable, can please help me with fixing that
I just want the page to be scrollable
Here is my Code :
class InstRegisterPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0x47705C53), Color(0x9E36251D)],
stops: [0.1, 0.9],
begin: Alignment.topRight,
end: Alignment.bottomLeft,
),
),
child: Column(
children: [
Container(
child: wLogo(),
),
SizedBox(
height: 75,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xFFF7F6F5),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(26),
topRight: Radius.circular(26)),
),
child: Column(
children: [
SizedBox(
height: 15,
),
CSfield('Particpent Name',''),
CSfieldEmail('Email',''),
CSfield('Password',''),
CSPasswordFiled('Phone Number',''),
CSButton(),
],
),
),
)
],
),
//child: InstHomePageWidgets(),
),
),
);
}
}
You can wrap your Column with a SingleChildScrollView to make it scrollable.
SingleChildScrollView(
child: Column(
children: [...]
),
)
You can check the page here to see all the scrollable widgets.
Also if the keyboard is pushes content up you can check this page
I have two icons in a stack. I want one to hide the other, but instead it's semi-transparent and the other is shown behind it.
This is the code:
Stack(
children: [
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 10),),
Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 20),),
],
)
This is how it looks:
Icons are more like SVG, use vector to draw shape. There are some empty spaces inside the icon to draw the path, and we can see the background though this. Also, it contains padding around it, You can use your assets to draw the UI.
We can wrap with another ColoredBox to hide the background icon, but it will get extra padding from IconData.
This snippet shows basic level structure.
SizedBox(
height: 24,
width: 24 * 1.7,
child: Stack(
alignment: Alignment.center,
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
child: const Icon(
Icons.account_circle_rounded,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
child: const Icon(
Icons.account_circle_sharp,
),
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
],
),
),
Widget renders bottom to top.
I am writing an ebook application in flutter.
I could have a long text page that needs to scroll (the text is outside the boundaries of the screen from the beginning).
Also, I would like to zoom in the page and keep scrolling when it is zoomed in.
This is a snippet of the code
return Container(
child: Column(
children: [
Container(
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide()
)
),
margin: EdgeInsets.only(left: 4, top: 4, right: 4),
child: Text("Header")
),
Expanded(
child: SingleChildScrollView(
child:
InteractiveViewer(
minScale: 0.5,
maxScale: 4,
child:
Text("A very long text...") // Here I have a text that exceeds the screen boundaries
),
),
),
]
),
);
The problem is that when I zoom in the page, the scroll range remains the same.
With this behavior the user cannot scroll the entire zoomed page.
Do you have any suggestions?
Thanks a lot.
Try changing the ListView() to a SingleChildScrollView()
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: InteractiveViewer(
maxScale: 4.0,
minScale: 0.5,
child: Container(
height: 10000,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[Colors.orange, Colors.red],
stops: <double>[0.0, 1.0],
),
),
),
),
),
),
This worked for me.
If in your case this don't work you should probably look where this snippet are being called. And instead of the SingleChildScollView wrap your e-book inside the widget you should wrap from outside of it. Like this:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: <Your Widget>
),
),
);
I have a Container with a linear gradient serving the purpose of being a background color for my app. When i put a Column as the child, my background only serves it's purpose in the column size. The remaining space gets a whitespace.
I have tried putting the Scaffold's background color to transparent but that turns it into a black space instead of a white space
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
padding: EdgeInsets.all(32),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.9],
colors: [
HexColor("#2a4644"),
HexColor("#3c1630"),
],
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('test')
],
)
),
);
}
}
Here is a screenshot of how it looks now: http://prntscr.com/o64s1f
You have to use a Stack. The Container should occupy the whole screen width and height. Then place the Column in front of the Container.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.9],
colors: [
Color(0xFF2a4644),
Color(0xFF3c1630),
],
),
),
),
Padding(
padding: const EdgeInsets.all(32.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('test')
],
),
),
],
),
);
}