I'm trying to make my containers transparent and still want them to easily standout from the background color, just like below image. (this is PSD image)
Desired Layout
I tried wrapping Container inside a Material widget like this:
class customBar extends StatelessWidget {
const customBar({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
elevation: 2,
borderRadius: BorderRadius.circular(10),
child: Container(
width: double.infinity,
height: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
//color: Color(0xff0a4873),
),
child: Text(
'',
textAlign: TextAlign.left,
),
),
);
}
}
but it gives it too much elevation
also tried using a solid color but that doesn't give me what is required either,
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
customBar(),
Container(
width: double.infinity,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xff0a4873),
),
child: Text(
'',
textAlign: TextAlign.left,
),
),
],
),
),
),
here is the output:
Output
Material is not necessary. If you want to adjust color transparency either use Colors.YOUR_COLOR.withOpacity(0.0 .. to .. 1.0) or Color.fromRGBO(RED, BLUE, GREEN, 0.0 .. to .. 1.0)
Examples:
Colors.blue.withOpacity(0.3);
// OR
Color.fromRGBO(50, 45, 220, 0.3);
Edit
You can simplify your layout like this.
HomePage
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomContainer(
child: Column(
children: [
// other widgets and your containers here
],
),
),
);
}
}
Your CustomContainer Widget
class CustomContainer extends StatelessWidget {
final Widget child;
CustomContainer({this.child});
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomLeft,
colors: [
Color(0xFF1187be),
Color(0xff061465),
],
),
),
child: child,
);
}
}
Related
First time using flutter: I'm trying to populate this column with a StatelessWidget but when I run the app, List is completely blank, even though List length is corretly displaying space for the amount of items I'm trying to display. When I debug the app there are no errors, so I can't understand if I'm submitting a completely blank widget or if I'm not inserting into the list the right way.
What I'm trying to achieve is displaying a placeholder card: once clicked it should follow the route and link to another page.
Here is my widget:
import 'package:progetto_esame_febbraio/utils/config.dart';
import 'package:flutter/material.dart';
class DoctorCard extends StatelessWidget {
const DoctorCard({Key? key, required this.route}) : super(key: key);
final String route;
#override
Widget build(BuildContext context) {
Config().init(context);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 100),
height: 150,
child: GestureDetector(
child: Card(
elevation: 5,
color: Colors.black,
child: Row(
children: [
SizedBox(
width: Config.widthSize * 0.33,
child: Image.asset(
'assets/facebook.png',
fit: BoxFit.fill,
),
),
Flexible(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'Dr Richart',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const Text(
'Dental',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.normal,
),
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Icon(
Icons.star_border,
color: Colors.yellow,
size: 16,),
Spacer(
flex: 1,
),
Text('4.5'),
Spacer(
flex: 1,
),
Text('Reviews'),
Spacer(
flex: 1,
),
Text('(20)'),
Spacer(
flex: 7,
),
],
),
],
),
),
),
],
),
),
onTap: () {
Navigator.of(context).pushNamed(route);
}, // rinvia al dettaglio dottore
),
);
}
}
And Here is my home page:
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15,
vertical: 15,
),
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: List.generate(5, (index) {
return const DoctorCard(
route: 'doc_details',
);
}),
),
),
),
),
);
}
}
You are having too much padding.
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),//here it was 100
height: 150,
child: GestureDetector(
I have one login page .dart that contains 3 seperate object class dart such as : InputEmail , Password and ButtonLogin which its split each other but it's called together in login page
My problem is how can i validate form input email and password when i submit the button login when field is empty and email not valid
I tried to create Globalkey FormState inside login page and call it on button login class dart though
Onpressed event but nothing give me error message.
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.redAccent, Colors.lightBlueAccent]),
),
key: _formKey,
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
Row(children: const <Widget>[
VerticalText(),
TextLogin(),
]),
const InputEmail(),
const PasswordInput(),
const ButtonLogin(),
const FirstTime(),
],
),
],
),
),
);
}
}
class ButtonLogin extends StatefulWidget {
const ButtonLogin({Key? key}) : super(key: key);
#override
_ButtonLoginState createState() => _ButtonLoginState();
}
class _ButtonLoginState extends State<ButtonLogin> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 40, right: 50, left: 200),
child: Container(
alignment: Alignment.bottomRight,
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
color: Colors.blue,
blurRadius: 10.0, // has the effect of softening the shadow
spreadRadius: 1.0, // has the effect of extending the shadow
offset: Offset(
5.0, // horizontal, move right 10
5.0, // vertical, move down 10
),
),
],
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FlatButton(
onPressed: () {
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(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'OK',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
Icon(
Icons.arrow_forward,
color: Colors.lightBlueAccent,
),
],
),
),
),
);
}
}
You can pass the callback of onPressed function of button to Login Page and validate it there.
class ButtonLogin extends StatefulWidget {
const ButtonLogin({Key? key, required this.onPressed}) : super(key: key);
final VoidCallBack onPressed ;
#override
_ButtonLoginState createState() => _ButtonLoginState();
}
class _ButtonLoginState extends State<ButtonLogin> {
#override
Widget build(BuildContext context) {
return Padding(
child: Container(
....
child: FlatButton(
onPressed: widget.onPressed,
child: Row(
...
);
}
}
and change add this onPressed parameter inside ButtonLogin widget on Login page
const InputEmail(),
const PasswordInput(),
const ButtonLogin(onPressed: () {
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(
const SnackBar(content: Text('Processing Data')),
);
}
},),
const FirstTime(),
The easy way is to create a single StateFulWidget and within the StateFulWidget, you brake your form Widgets (InputEmail, Password and ButtonLogin) into separate Widget methods(functions). Afterward Wrap them with a Form widget using Row, Column or any Widget that accept list.
Next you add the _formKey to the Form widget. I will advice the use of controller for your inputs. Below is an example using your code. By the way change FlatButton -> TextButton
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
#override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.redAccent, Colors.lightBlueAccent]),
),
child: Form(
key: _formKey,
child: ListView(
children: [
Column(
children: [
// inputEmail(),
// passwordInput(),
buttonLogin(),
],
),
],
),
),
),
);
}
Widget buttonLogin() {
return Padding(
padding: const EdgeInsets.only(top: 40, right: 50, left: 200),
child: Container(
alignment: Alignment.bottomRight,
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
boxShadow: const [
BoxShadow(
color: Colors.blue,
blurRadius: 10.0,
spreadRadius: 1.0,
offset: Offset(5.0, 5.0),
),
],
),
child: TextButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'OK',
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
Icon(
Icons.arrow_forward,
color: Colors.lightBlueAccent,
),
],
),
),
),
);
}
}
please help me, i have a errpr in my code like this , "A RenderFlex overflowed by 126 pixels on the right". and this is my code.
I've searched the internet that most solutions use flexible, but I'm still confused where to place it. I want when the text increases, the height of the box also increases
ListView.builder(
itemCount: 5,
padding: EdgeInsets.only(left: 16, right: 16),
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
height: 76,
margin: EdgeInsets.only(bottom: 13),
padding:
EdgeInsets.only(left: 24, top: 12, bottom: 12, right: 22),
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: kPrimaryColor.withOpacity(0.23))
]),
child: Row(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 57,
width: 57,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
"assets/images/image_1.png"))),
),
SizedBox(
width: 13,
),
Text(
"testing123451 testing123451 testing123451 testing123451",
),
],
)
],
),
);
})
please give me the solution, thank you
At first remove row's parent Row widget and wrap Text widget with Expanded.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return ListView.builder(
itemCount: 5,
padding: EdgeInsets.only(left: 16, right: 16),
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
// height: 76,
margin: EdgeInsets.only(bottom: 13),
padding: EdgeInsets.only(left: 24, top: 12, bottom: 12, right: 22),
decoration: BoxDecoration(
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: Colors.blue.withOpacity(0.23))
]),
child: Row(
children: <Widget>[
Container(
height: 57,
width: 57,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage("assets/images/image_1.png"))),
),
SizedBox(
width: 13,
),
Expanded(
child: Text(
"testing123451 testing123451 testing123451 testing123451",
),
),
],
),
);
});
}
}
You could use the Expanded widget and wrap it around the Text widget, like this:
Expanded(
child: Text(
"testing123451 testing123451 testing123451 testing123451"
)
),
I need to change color of cupertino scrollbar, but I can't do that via normal constructor. Is there any way to make scrollbar white?
CupertinoScrollbar(
thickness: 5,
controller: scrollController,
thicknessWhileDragging: 8,
//color not exist
)
The CupertinoScrollBar is hardcoded so on iOS you can't change the color, but you can use highlightColor for the ThemeData. The Color will then displayed on Android only.
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
//main color
primaryColor: const Color(0xffFFC600),
//main font
fontFamily: 'Roboto-Medium',
//swatch stretching
primarySwatch: goldenThemeColor,
visualDensity: VisualDensity.adaptivePlatformDensity,
splashColor: const Color(0xffFFC600),
//color for scrollbar
highlightColor: Color(0xffffc600)
),
import 'package:flutter/material.dart';
class LandingPage extends StatefulWidget {
LandingPage({Key key}) : super(key: key);
#override
State<StatefulWidget> createState() {
return _LandingPageState();
}
}
class _LandingPageState extends State<LandingPage> {
ScrollController _controller;
double _offset = 0;
#override
void initState() {
_controller = ScrollController();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: [
Container(
child: SingleChildScrollView(
controller: _controller,
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.black,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.red,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.blue,
),
],
),
),
),
//Scroll bar
Container(
alignment: Alignment.centerRight,
height: MediaQuery.of(context).size.height,
width: 20.0,
margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 20.0),
decoration: BoxDecoration(color: Colors.black12),
child: Container(
alignment: Alignment.topCenter,
child: GestureDetector(
child: Container(
height: 40.0,
width: 15.0,
margin:
EdgeInsets.only(left: 5.0, right: 5.0, top: _offset),
decoration: BoxDecoration(
color: Colors.grey, //Change Color here
borderRadius: BorderRadius.all(Radius.circular(3.0))),
),
onVerticalDragUpdate: (dragUpdate) {
_controller.position.moveTo(dragUpdate.globalPosition.dy * 3.5);
setState(() {
if(dragUpdate.globalPosition.dy >= 0) {
_offset = dragUpdate.globalPosition.dy;
}
print("View offset ${_controller.offset} scroll-bar offset ${_offset}");
});
},
),
)
),
],
),
);
}
}
My base widget is a Column. The first element is a Container which has a BoxShadow. The second element is a ListView which builds several Card, depending on the context. If the scroll is 0 the shadow gets displayed. However when start scrolling, the card is "over" the shadow (higher z-index) and hides it.
unscrolled
scrolled
The shadow should stay always on top, over the Cards. How is this done?
EDIT
if you don't want container shadow to disappear on scroll remove the ScrollNotification and NotificationListener
There is a widget for that 😉
You can use ScrollNotification with NotificationListener. Try this;
Happy coding! 🤓
class TestPage extends StatefulWidget {
const TestPage({Key key}) : super(key: key);
#override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
double blurRadius = 10.0;
double spreadRadius = 1.0;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueGrey,
title: Text('Title'),
),
body: Container(
width: Get.width,
height: Get.height,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0).copyWith(
top: 62.0,
),
child: NotificationListener<ScrollNotification>(
// ignore: missing_return
onNotification: (scrollNotification) {
if (scrollNotification is ScrollStartNotification) {
setState(() {
blurRadius = 0.0;
spreadRadius = 0.0;
});
} else if (scrollNotification is ScrollEndNotification) {
setState(() {
blurRadius = 10.0;
spreadRadius = 1.0;
});
}
},
child: ListView.builder(
// controller: _controller,
itemCount: 10,
itemBuilder: (context, index) {
return Card(
child: Container(
width: Get.width * .8,
height: 100.0,
child: Center(
child: Text('child # index : $index'),
)),
);
},
),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
width: Get.width,
height: 60.0,
margin: EdgeInsets.only(),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: blurRadius,
spreadRadius: spreadRadius,
),
],
),
child: Center(
child: Text('TOP CONTAINER'),
),
),
),
],
),
),
);
}
}
According to your question, here is the concept of what is going wrong here.
The 1st child of Column is a Container with shadow. Shadow renders outside of the defined size. If you don't provide any spaces after this Container we won't be able to see the shadow. This space can be done by Container margin , SizedBox or wrapping our list with Padding. But now our main question is how we get shadow while index=0. I believe it is coming from ListChildren`. They contain upper spaces, that's why we can see only the 1st time.
On Ui render priority starts from bottom to Top.
How to solve this problem:
We can provide space at the bottom of our container or assign margin(not padding), or use a SizedBox after the container providing the same amount of height as shadow.
providing bottom margin on the container.
adding a SizedBox with height of shadow.
wrapping our list with Padding and providing top:.
In this image,
our shadow: white, background:amber.
Demo code:
import 'package:flutter/material.dart';
class ColumnWithContainerShadow extends StatelessWidget {
const ColumnWithContainerShadow({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
body: Column(
children: [
Container(
height: 50,
width: double.infinity,
////* we dont need margin if we have padding on ListView
// margin: EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
color: Colors.green,
boxShadow: [
BoxShadow(
offset: Offset(0, 12),
color: Colors.white,
)
],
),
child: Center(child: Text("Container A")),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 12),
child: ListView(
children: [
...List.generate(
333,
(index) => Container(
/// enable this margine and remove other spaces to see 1st child shadow.(shadow depend on children position)
// margin: EdgeInsets.only(top: 12),
height: 60,
color: Colors.deepPurple,
child: Text("$index"),
),
)
],
),
),
),
Container(
height: 50,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
boxShadow: [
BoxShadow(
offset: Offset(0, 12),
color: Colors.white,
)
],
),
child: Text("Bottom Container"),
),
// Comment to close shadow
SizedBox(
height: 20,
)
],
),
);
}
}
Wrap this upper box in Material widget and provide an elevation.