I had a problem with my project, i'm trying make container with box shadow on bottom. below that container i want make to new container but they are some separate space between container, i think its because box shadow. so the question is how to make they connect ith no space but the shadow still visible.
pic
here my code :
return Scaffold(
body: SafeArea(
child: Container(
child: ListView(
physics: BouncingScrollPhysics(),
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.zero,
),
child: Container(
height: 70.0,
margin: const EdgeInsets.only(
bottom: 6.0), //Same as `blurRadius` i guess
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5.5),
bottomRight: Radius.circular(5.5),
topLeft: Radius.zero,
topRight: Radius.zero,
),
color: kDarkGreenColor,
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
child: ListView.builder(
padding: EdgeInsets.only(left: 10, right: 5),
itemCount: planticos.length,
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(right: 15, bottom: 6),
height: 40,
width: 70,
decoration: BoxDecoration(
color: kMainColor.withOpacity(0),
image: DecorationImage(
image: AssetImage(planticos[index].image),
),
),
);
}),
),
),
),
),
Container(
margin: EdgeInsets.only(top: 0),
height: 200,
color: kMainColor,
),
],
),
),
),
);
}
use stack.
2nd Container will be visible over 1st Container.
for example...
Stack(
children: <Widget>[
Container(
height: 400,
decoration: BoxDecoration(
color: Colors.green,
),
),
Container(
height: 200,
decoration: BoxDecoration(
color: Colors.green,
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(0.0, 1.0), //(x,y)
blurRadius: 6.0,
),
],
),
),
],
),
You should use the stack widget, see this example:
Stack(
children:[
Container() //which you wanna be under the shadow.
Container() //which you wanna make it's shadow visible.
]
)
Tip: Use Positioned() under the stack to specify the position of containers.
Related
I have a chat messenger screen which looks like the given screenshot .
As you can see , bottom message is hidden behind the text input area .
The messages are listview , built using streambuilder .
I want the messages above the text input area .
https://i.stack.imgur.com/A82X2.png
return Scaffold(
appBar: AppBarMain(context),
body: Container(
child: Stack(
children: [
chatMessageList(),
Positioned(
bottom: 0,
child: Container(
color: Color(0x54ffffff),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 14, vertical: 20),
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Expanded(
child: TextField(
controller: messageController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: ' Message!...',
hintStyle: TextStyle(color: Colors.white54),
border: InputBorder.none),
),
),
InkWell(
onTap: () {
sendMessage();
},
child: Container(
padding: EdgeInsets.all(9),
height: 40,
width: 40,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0x36FFFFFF),
Color(0xFFFFFFFF)
],
),
borderRadius: BorderRadius.circular(40)),
child: Image.asset('assets/images/send.png')),
)
],
),
),
),
)
],
),
),
);
}
}
Your structure should be something like
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: chatMessageList(),
),
MessageFieldWidget(),
],
)
This will ensure that your chatMessageList will take up all of the space available in the screen and your Message Field will take up only the space that it needs. You don't need to use Positioned or Padding.
Hey there i want to make horizontal ListView.builder but it shows error that 'BoxConstraints forces and infinite width'. Actually i want to make a 'Buyer Request' page like Fiverr.
I achieved my goal using PageView.builder but when i use
if(snapshot.connectionState == ConnectionState.waiting)
return SpinKitDoubleBounce(color: kPrimaryColor);
it brings me back to 1st index whenever i swipe to next index.
So i want to use ListView.builder instead. Here is my code: (Hope someone will solve my problem)
if (snapshot.hasData)
return SizedBox(
child: ListView.builder(
// scrollDirection: Axis.horizontal,
itemCount: indexLength,
controller: PageController(viewportFraction: 1.0),
// onPageChanged: (int index) => setState(() => _index = index),
itemBuilder: (_, i) {
return SingleChildScrollView(
child: Card(
margin: EdgeInsets.all(10),
child: Wrap(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundColor: kPrimaryColor.withOpacity(0.8),
backgroundImage: AssetImage('assets/images/nullUser.png'),
child: snapshot.data[i]['PhotoURL'] != null
? ClipRRect(
borderRadius: BorderRadius.circular(50),
child:
Image.network(snapshot.data[i]['PhotoURL'],
width: 50,
height: 50,
fit: BoxFit.cover,),
)
: ClipRRect(
borderRadius: BorderRadius.circular(50),
child:
Image.asset('assets/images/nullUser.png',
width: 50,
height: 50,
fit: BoxFit.cover,),
)
),
title: Text(
snapshot.data[i]['Email'],
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black.withOpacity(0.7),
),
),
subtitle: Text(
snapshot.data[i]['Time'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
color: Colors.grey[200],
),
padding: EdgeInsets.all(10),
child: Text(
snapshot.data[i]['Description'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
SizedBox(
height: 8,
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.category_outlined),
title: Text(
'Category : ${snapshot.data[i]['Category']}',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.location_pin),
title: Text(
snapshot.data[i]['Location'],
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(
Icons.attach_money,
color: kGreenColor,
),
title: Text(
'Budget : Rs.${snapshot.data[i]['Budget']}',
style: TextStyle(
fontSize: 14,
color: kGreenColor,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
border:
Border.all(color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.timer),
title: Text(
'Duration : ${snapshot.data[i]['Duration']}',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(
height: 35,
),
sendOfferButton(),
SizedBox(
height: 15,
),
Center(
child: Text(
"${i + 1}/$indexLength",
style: TextStyle(fontSize: 13),
),
),
],
),
),
],
),
),
);
},
),
);
If anyone want to see full file.
Check it Here
Use pageview.builder instead :
Container(
height: MediaQuery.of(context).size.height / 3,
width: MediaQuery.of(context).size.width,
child: PageView.builder(
pageSnapping: false,
physics: PageScrollPhysics(),
controller: _pageController,
scrollDirection: Axis.horizontal,
itemCount:
_articleController.articleListDat.length,
itemBuilder: (context, index) {
return Container();
}
And pagecontroller
PageController _pageController =
PageController(initialPage: 2, viewportFraction: 0.9);
First wrap your ListView.builder into LimitedBox / container then set height on it. Then add
scrollDirection: Axis.horizontal,
It's Done
I just started learning Dart and Flutter development and have been playing with BoxShadow.
As you can see in the image below, the shadow for the Bar, Boo and Faz cards are cutoff while that for the text box shows up.
How do I ensure the shadows for the cards show up correctly?
Here's my code:
import 'package:flutter/material.dart';
import 'package:reminder_app/constants.dart';
class Body extends StatelessWidget {
Widget _buildBanner(size) {
return Container(
height: size.height * 0.7,
decoration: BoxDecoration(
color: kPrimaryColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
);
}
Widget _buildCard(text) {
return Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.teal[200],
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(10, 10),
blurRadius: 25,
color: Colors.black.withOpacity(
0.75,
),
),
],
),
child: Text(text),
);
}
Widget _buildCardGrid() {
return Expanded(
child: GridView.count(
primary: false,
padding: EdgeInsets.symmetric(
vertical: kDefaultPadding * 1.5,
),
crossAxisSpacing: 20,
mainAxisSpacing: 20,
crossAxisCount: 2,
children: <Widget>[
_buildCard("Foo"),
_buildCard("Bar"),
_buildCard("Baz"),
_buildCard("Boo"),
_buildCard("Far"),
_buildCard("Faz"),
],
),
);
}
Widget _buildInputBox() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(10, 10),
blurRadius: 25,
color: Colors.black.withOpacity(
0.75,
),
),
],
),
height: 55,
child: TextField(
decoration: InputDecoration(
hintText: "Text Here",
hintStyle: TextStyle(
color: kPrimaryColor.withOpacity(
0.5,
),
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
);
}
Widget _buildInteractionContainers(size) {
return Positioned(
child: Container(
margin: EdgeInsets.symmetric(
horizontal: kDefaultPadding * 2,
),
width: size.width,
child: Column(
children: [
_buildInputBox(),
_buildCardGrid(),
],
),
),
);
}
Widget _buildBody(size) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: size.height * 0.7,
child: Stack(
children: <Widget>[
_buildBanner(size),
_buildInteractionContainers(size),
],
),
),
],
),
);
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return _buildBody(size);
}
}
Bar, Boo and Faz's shadows are cutoff while the shadow for the text box shows up
Edit [Answer]: I was able to fix this by adding clipBehavior: Clip.none to GridView to prevent shadow clipping.
Please try this code, To How to prevent box-shadow from being cut off?
If the box-shadow is muted, make sure that
overflow: visible
Is set to all div tags that contain your element.
I hope this information will be useful to you.
Thank you.
Hi I have a stream builder that lists containers with a button to count down and when the counter hits zero I wanted to hide that single container from the list I can’t figure out how to, if anyone does please help
bool visibility = true;
Widget _dataList() {
if (data != null) {
return StreamBuilder(
stream: data,
builder: (context, snapshot) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
padding: EdgeInsets.all(5.0),
itemBuilder: (context, i) {
return visibility == true
? new Container(
child: Padding(
padding: EdgeInsets.only(top: 5, right: 5, left: 5),
child: Material(
borderRadius: BorderRadius.circular(20),
elevation: 9,
color:
Theme.of(context).cardColor.withOpacity(.95),
shadowColor:
Theme.of(context).accentColor.withOpacity(.5),
child: Container(
padding: EdgeInsets.only(
bottom: 10, right: 10, left: 10, top: 15),
height: 210,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius: BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey.withOpacity(0.5))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
'Number Of Participants :-' +
snapshot.data.documents[i]
.data['numberOfParticipants'],
style: TextStyle(
color: Colors.white, fontSize: 15),
),
),
Padding(
padding: const EdgeInsets.only(top: 7.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 40,
),
Material(
borderRadius:
BorderRadius.circular(20),
elevation: 26,
color: Color(0xFF0B0F1B),
child: Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius:
BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey
.withOpacity(0.5))),
child: InkWell(
splashColor: Colors.redAccent,
borderRadius:
BorderRadius.circular(20),
child: Center(
child: Text(
'View',
style: TextStyle(
color: Color(0xFFC77AF3),
fontSize: 18),
)),
onTap: () {
int currentval = int.parse(
snapshot.data.documents[i]
.data[
'numberOfParticipants']);
setState(
() {
currentval--;
snapshot.data.documents[i]
.data[
'numberOfParticipants'] =
currentval.toString();
if (currentval == 0) {
visibility = false;
}
},
);
},
),
),
),
SizedBox(
width: 85,
),
Material(
borderRadius:
BorderRadius.circular(20),
elevation: 26,
color: Color(0xFF0B0F1B),
child: Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: Color(0xFF0B0F1B),
borderRadius:
BorderRadius.circular(20),
border: Border.all(
width: 1,
color: Colors.grey
.withOpacity(0.5))),
child: InkWell(
splashColor: Colors.greenAccent,
borderRadius:
BorderRadius.circular(20),
child: Center(
child: Text(
'Join',
style: TextStyle(
color: Colors.greenAccent,
fontSize: 18),
)),
onTap: () {
setState(
() {},
);
},
),
),
),
],
),
),
],
),
),
),
),
)
: new Container();
},
);
});
} else {
return Center(child: Text('Nothing yet'));
}
}
this is my code i tried to accomplish the visibility by an empty container because i don't want it to hold a place but the problem is it hides all other containers with it the whole list goes invisible
You can use Opacity with an opacity: of 0.0 to draw make an element hidden but still occupy space.
To make it not occupy space, replace it with an empty Container().
EDIT: To wrap it in an Opacity object, do the following:
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))
Google Developers quick tutorial on Opacity: https://youtu.be/9hltevOHQBw
you can also try
Visibility(
visible: false,
child: child
)
);
I want to make a Button that looks like the picture above with Flutter.
But I have no idea how to make it... help me, please!
Widget _startButton(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 250.0),
child: Stack(
children: <Widget>[
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildSideButtons(context, Icons.settings, palette.limeYellow,
const EdgeInsets.only(right: 30.0)),
_buildSideButtons(context, Icons.lightbulb_outline,
palette.limeGreen, const EdgeInsets.only(left: 30.0)),
],
),
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.35,
height: MediaQuery.of(context).size.height,
child: DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [palette.limeYellow, palette.limeGreen])),
))),
Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.275,
height: MediaQuery.of(context).size.height,
child: new RaisedButton(
elevation: 0.0,
color: Colors.white,
child: new Text(
"START",
style: TextStyle(
fontFamily: "Bebas Neue",
fontSize: 25.0,
fontWeight: FontWeight.bold),
),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => CountDown())),
shape: CircleBorder())))
],
),
);
}
Widget _buildSideButtons(
BuildContext context, IconData icon, Color coverColor, EdgeInsets pad,
{VoidCallback navigate}) {
return Container(
height: MediaQuery.of(context).size.height * 0.07,
child: RaisedButton(
elevation: 5.0,
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(50.0))),
child: Container(
child: Padding(
padding: pad,
child: Icon(icon, color: Colors.black),
),
),
color: coverColor,
textColor: Colors.white,
),
);
}
I used Stack and Raised Buttons and finally made it! Thank you for the advice. I simply need to add boxShadow to make it close to the example picture I uploaded above.
To make a similar compound Button you should use a stack widget, you can see that both the side buttons are same so they are identical buttons in a row with a BorderRadius. they design of the middle button can be done by clipping button border by half of its width and then lay it out at the middle of the row.
You can make use of an IconButton with an asset image which contain a transparent background.
IconButton(
icon: Image.asset('assets/your/transperantBG/icon.png'),
onPressed: (){},
)