Image link
How can I push the child widget outside the stack's bound.
I want to overlap the search bar at AppBar widget.
Stack's overflow property not working what we use instead of it.
I am using the positioned widget to move on child widget to outside the stack's boundary, but it remains same I am getting issue I need solution for this.
This is my code
PreferredSize _buildAppBar() {
return PreferredSize(
preferredSize: const Size.fromHeight(100),
child: AppBar(
centerTitle: true,
elevation: 0,
backgroundColor: Colors.transparent,
flexibleSpace: Stack(
clipBehavior: Clip.none,
fit: StackFit.loose,
// alignment: AlignmentDirectional.bottomEnd,
children: [
Expanded(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('images/gym.jpg'), fit: BoxFit.cover),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
// top: 90,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
// ignore: prefer_const_constructors
boxShadow: const [
BoxShadow(color: Colors.black12, blurRadius: 5)
]),
child: TextFormField(
// controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none,
),
hintText: 'Search Your Product',
hintStyle: TextStyle(color: Colors.grey[400]),
contentPadding:
const EdgeInsets.only(left: 22, right: 12),
fillColor: Colors.white,
filled: true,
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.search,
size: 30,
))),
// obscureText: obscureText,
),
),
),
],
),
title: const Text(
'Home',
style: TextStyle(
color: Colors.white,
),
),
),
);
}
One of possilbe ways is to use CustomScrollView with SliverAppBar and Stack
Here is the link to one of the solutions
Related
I want to add an Icon to Box Decoration like this you are seeing images on left side.
How do I add this with box decoration
Here is the code:
Container(
width: 307,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(10.0),
shape: BoxShape.rectangle,
),
child: CountryListPick(
onChanged: (list){
print(list?.name);
},
theme: CountryTheme(
labelColor: Colors.white,
isShowFlag:true,
isShowCode: false,
isShowTitle:true,
isDownIcon: true,
showEnglishName: true,
),
),
),
You can use this widget for a textfield with boxdecoration and icon:
TextFormField(
key: Key(key),
controller: controller,
decoration: InputDecoration(
prefixIcon: Icon(icon), // <-- left icon
hintText: hintText,
border: OutlineInputBorder( //<--- decoration border
borderRadius: BorderRadius.all(Radius.circular(90.0)),
borderSide: BorderSide.none,
),
filled: true,
),
)
You can use a row as a children of container
Container(
width: 307,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(10.0),
shape: BoxShape.rectangle,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Image.asset(
"assets/images/cover_placeholder.png",
height: 30,
width: 30,
fit: BoxFit.contain,
),
),
SizedBox(width: 12,),
Flexible(
child: CountryListPick(
onChanged: (list){
print(list?.name);
},
theme: CountryTheme(
labelColor: Colors.white,
isShowFlag:true,
isShowCode: false,
isShowTitle:true,
isDownIcon: true,
showEnglishName: true,
),
),
),
],
),
),
So you can use SizedBox or Container -
SizedBox(
width: 300.0,
height: 120.0,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(
child: Row(
children: <Widget>[
Material(
type: MaterialType.transparency,
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(
top: 1.0, bottom: 1.0, right: 5.0),
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(15.0),
color: Colors.green[50],
),
child: IconButton(
icon: Icon(Icons.favorite),
color: Colors.red[700],
highlightColor: Colors.red,
onPressed: () {},
),
),
],
),
],
),
),
],
),
),
),
),
I have a situation where 2 Textfields are placed inside a Stack Widget overlapping one another. Is there anyway i can scroll both the textfields together vertically if the data exceeds the size of the screen?
Stack(
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(15, 8, 0, 0),
child: SyntaxView(
code: codeController.text,
syntax: Syntax.C,
syntaxTheme: SyntaxTheme.gravityDark(),
withZoom: true,
withLinesCount: true),
),
Container(
width: 362,
padding: EdgeInsets.fromLTRB(55, 12, 0, 0),
child: TextFormField(
scrollPhysics: NeverScrollableScrollPhysics(),
focusNode: codeFocus,
controller: codeController,
autofocus: true,
keyboardType: TextInputType.multiline,
maxLines: null,
style: TextStyle(
color: Color(0x00ffffff),
// color: Colors.yellow,
height: 1.35,
fontFamily: "CodeFont",
fontSize: 12,
),
decoration: InputDecoration(
border: InputBorder.none,
),
onChanged: (value) {
setState(() {
CODE = value;
// print("X : ${codeController.text}");
});
},
),
),
],
),
A simple way way to handle that situation is to wrap your content in a ListView, which handles scrolling of its children. Here's a snippet from the ListView docs as an example:
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
https://api.flutter.dev/flutter/widgets/ListView-class.html
is there a way to make sure that a widget keeps underneath the quick menu on android.
At the moment I do it in a kind of dirty way with a padding parameter, I hope there is a better solution.
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 22.0),
color: Color(0xff757575),
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
buildHeader(),
Padding(
padding: const EdgeInsets.only(left: 40.0, right: 40.0),
child: TextField(
// cursorColor: Colors.red,
maxLines: null,
textAlign: TextAlign.left,
autofocus: false,
style: TextStyle(
fontSize: 20.0,
),
decoration: InputDecoration(
hintText: "Add title",
border: InputBorder.none,
),
),
),
Divider(
color: Colors.black,
),
SizedBox(
height: 20.0,
),
TimeAndDateCard(),
EventEntryCard(
label: 'Add Location',
icon: Icon(Icons.place),
onLongPress: () {
showSearch(delegate: LocationSearch(), context: context);
},
),
EventEntryCard(
icon: Icon(Icons.people),
label: 'Invite people ',
),
EventEntryCard(
icon: Icon(Icons.attachment),
label: 'Add attachment',
),
EventEntryCard(
icon: Icon(Icons.work),
label: 'Status',
),
],
),
),
);
}
}
layout without padding
Wished layout. Container is underneath the statusbar
Wrap your Container with SafeArea and it will do the magic for you..
Widget build(BuildContext context) {
return SafeArea(
child: Container(),
);
}
Hope it answers your question..
When I pull up the virtual keyboard on my virtual android device, it looks as follows:
As you can see, there is a sizable amount of black padding at the bottom of the keyboard. I can't figure out how to get rid of this.
I have already tried resizeToAvoidBottomPadding: false,, which removes the padding at the bottom of the screen when the keyboard is not showing, but doesn't help when it is. Would much appreciate any input!
Code:
Scaffold(
backgroundColor:const Color(0xffFFF6E0),
resizeToAvoidBottomPadding: false,
child:GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child:Container(
child: Stack(
overflow: Overflow.clip,
children: <Widget>[
AnimatedPositioned(
duration: Duration(milliseconds: 400),
top:5,
bottom: (mode == 1)?MediaQuery.of(context).size.height*.18:MediaQuery.of(context).size.height,
left:5,
right:5,
child:Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Theme.of(context).colorScheme.primary,
),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Text(
"Welcome Back!",
style: Theme.of(context).textTheme.display3.copyWith(fontSize: 44),
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
)
],
),
)
),
Positioned(
bottom:0,
left:0,
right:0,
child:
Align(
alignment: Alignment.bottomCenter,
child: RaisedButton(
color: const Color(0xff251605),
elevation: 4,
textColor: const Color(0xffFFF6E0),
//padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child:
SizedBox(
width: 200,
height: 35,
child:
Text("Back",style:TextStyle(color:const Color(0xffFFF6E0),fontSize: 24,fontWeight:FontWeight.normal),textAlign: TextAlign.center,),
),
onPressed: (){
},
padding: const EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(40.0))
),
)
)
]
)
)
)
In your build method just before returning add this
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
Here it's my code in this moment:
ClipRRect(
borderRadius: BorderRadius.circular(11),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.bottomLeft,
end: FractionalOffset.topRight,
colors: <Color>[Colors.purple, AppBaseColors.orange],
),
boxShadow: [BoxShadow(color: Colors.yellow)]
),
child: Material(
child: InkWell(
onTap: () {
print("tapped");
},
child: Container(
width: ButtonTheme.of(context).minWidth,
height: ButtonTheme.of(context).height,
child: Center(
child: Text(
"log in",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
color: Colors.transparent,
),
),
),
WHAT HAVE I TRIED:
Add the boxShadow in the first Container
Add the boxShadow in the second Container
Add another Container with boxShadow as a parent of ClipRRect
Add the boxShadow in Material as shadowColor (ofc is not working because I don't have any kind of shadow)
Adding also the spreadRadius and blurRadius in all of the cases from above, but nothing changed.
Any idea what I did wrong?
You need to do these changes:
remove the ClipRRect widget.
add borderRadius inside BoxDecoration.
add an Offset to your BoxShadow.
Container(
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(
begin: FractionalOffset.bottomLeft,
end: FractionalOffset.topRight,
colors: <Color>[Colors.purple, Colors.orange],
),
borderRadius: BorderRadius.circular(11),
boxShadow: [
BoxShadow(color: Colors.yellow, offset: Offset(5.0, 5.0))
]),
child: Material(
borderRadius: BorderRadius.circular(11),
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () {
print("tapped");
},
child: Container(
width: ButtonTheme.of(context).minWidth,
height: ButtonTheme.of(context).height,
child: Center(
child: Text(
"log in",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
color: Colors.transparent,
),
),
I fixed mine by removing the clipBehavior or setting it to Clip.none.