i'm trying to display text of each picture below to that picture in an alertdialog like rating a score. I tried to use stack widget and this is the result the result. Text is in front of the picture and not display below th picture but i just want it to display below the picture. How can I do it correctly?
#override
Widget build(BuildContext context) {
return Container(
height: 60,
width: MediaQuery.of(context).size.width*0.75,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: pic.length,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.only(right: 10),
child: InkWell(
onTap: () {
},
child: Stack(
children: <Widget> [
Image.asset('assets/images/'+pic[index].toString()+'.png', height: 70, width: 70,),
Text(pic[index].toString())
])));
}));
}
}
reverse the order of your widgets like so:
First the InkWell Widget with a container child and to that container pass a column widget with the icon and then the text. I've used GestureDetector in this example..
GestureDetector(
onTap: #Do Something
child: Container(
child: Column(
children: <Widget>[
Icon('Your Icon Here'),
Text('Your Text Here')
],
),
),
),
this code if u not want use STACk
Container(
constraints: new BoxConstraints.expand(
height: 200.0,
),
alignment: Alignment.bottomLeft,
padding: new EdgeInsets.only(left: 16.0, bottom: 8.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/image.jpg'),
fit: BoxFit.cover,
),
),
child: new Text('Title',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
)
),
);
and this if u want use STACK
Container(
constraints: new BoxConstraints.expand(
height: 200.0,
),
padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/image.jpg'),
fit: BoxFit.cover,
),
),
child: new Stack(
children: <Widget>[
new Positioned(
left: 0.0,
bottom: 0.0,
child: new Text('Title',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
)
),
),
new Positioned(
right: 0.0,
bottom: 0.0,
child: new Icon(Icons.star),
),
],
)
);
this link if u want see more https://cogitas.net/overlay-text-icon-image-flutter/
You can position elements inside your stack - positioned
Related
sorry if the image is too fat, I don't know how to format image in stack, so, this is what I wanna achieve, and I've done this with the following code, but I get an error and my screen goes white(showing the scaffold, refusing to render my widgets coz of the errors), I know in some way I have to constrain some widget somewhere, but I don't know which to give a height, since I need my entire screen to be scrollable, I've even tried to not make entire screen scrollable or give the children of the lower container some fixed height like 900, but still, not working, how can I achieve this,
This is my code so far
#override
Widget build(BuildContext context) {
_animationController.forward();
return Consumer<ProductsModel>(
builder: (_, pModel, __) => Scaffold(
body: SingleChildScrollView(
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
width: double.maxFinite,
height: Dimensions.height395,
color: const Color(0xffF8F9FA),
child: Stack(
children: [
PageView.builder(
itemCount: widget.product.productImages!.length,
controller: _pageController,
onPageChanged: (value) {
_currentPage = value;
_animationController.forward();
// setState(() {});
},
itemBuilder: (context, index) {
return Center(
child: Container(
margin: EdgeInsets.only(top: Dimensions.height50),
width: Dimensions.productDetailContainerWidth,
height: Dimensions.productDetailContainerHeight,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
widget.product.productImages![index],
),
),
),
),
);
},
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: Dimensions.height20),
child: DotsIndicator(
dotsCount: widget.product.productImages!.length,
position: _currentPageValue,
decorator: DotsDecorator(
activeColor: kMainColour,
size: const Size.square(9.0),
activeSize: const Size(18.0, 9.0),
activeShape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(Dimensions.radius5)),
),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(
bottom: Dimensions.height20,
right: Dimensions.height20),
child: GestureDetector(
onTap: () {
pModel.toggleSave(context, widget.product);
},
child: Container(
height: Dimensions.height32,
width: Dimensions.height32,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
border: Border.all(
color: const Color(0xffDADADA),
),
),
child: Icon(
widget.product.isSaved
? IconlyBold.heart
: IconlyBroken.heart,
color: kMainColour,
),
),
),
),
),
],
),
),
),
// todo: nav row
Positioned(
top: Dimensions.height45,
right: Dimensions.height20,
left: Dimensions.height20,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
BackNavButton(
onTap: () {
Navigator.pop(context);
},
),
Text(
widget.product.productSeller!,
style: TextStyle(
fontFamily: kFontFamily,
fontWeight: FontWeight.w600,
fontSize: Dimensions.font14,
),
),
SvgPicture.asset("assets/icons/chat_icon.svg")
],
),
),
// todo: review and details
Positioned(
left: 0,
right: 0,
top: Dimensions.height395 - Dimensions.height10,
child: Container(
height: 900,
padding: EdgeInsets.only(left: Dimensions.height20, right: Dimensions.height20, top: Dimensions.height20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Dimensions.radius20),
color: Colors.white,
),
child: Row(
children: [
Column(
children: [
Text(
widget.product.productName!,
style: TextStyle(
fontFamily: kFontFamily,
fontWeight: FontWeight.w500,
fontSize: Dimensions.font18,
),
),
Visibility(
visible: widget.product.discount != null,
child: Text(
"(${widget.product.discount}% Discount)",
style: TextStyle(
fontFamily: kFontFamily,
fontWeight: FontWeight.w500,
fontSize: Dimensions.font13,
color: const Color(0xff9098B1),
),
),
),
const FilterRating(
stars: 4,
),
],
),
Column(
children: [
],
),
],
),
),
),
],
),
),
),
);
}
I am having problems positioning the text inside my stack of widgets.
I just want to position two text widgets one below another. But one of them is initially at the bottom already , it moves up the whole widget.
You can see in this attachment the result I would like to achieve (red lines) and the current result:
Widget build(BuildContext context) {
return Stack(
children: [
Card(
elevation: 6,
margin: const EdgeInsets.all(8),
child: Padding(
padding: const EdgeInsets.only(
bottom: 60, right: 5, left: 5, top: 5), //bordes interiores
child: Stack(children: [
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(image as String), //varImg.url
fit: BoxFit.cover)),
//child:
),
]),
)),
Container(
//alignment: Alignment.centerLeft,
padding: const EdgeInsets.all(10),
child: Column(
children: [
Row(
children: [
IconTheme(
data: IconThemeData(
color: gender == 'Male' ? Colors.blue : Colors.pink),
child: Icon(gender == 'Male'
? Icons.male_rounded
: Icons.female_rounded)),
Positioned(
bottom: 10,
child: Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
),
],
),
],
),
),
],
);
}
}
You could use a Column with mainAxisAlignment set to MainAxisAlignment.end and set the two widgets as its children.
:SliverToBoxAdapter(
child: SizedBox(
child: Column(
children: [
// ignore: prefer_const_constructors
Padding(
padding: const EdgeInsets.only(right: 210.0),
// ignore: prefer_const_constructors
child: Text(
"Great Personality",
// ignore: prefer_const_constructors
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
),
Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
child: Container(
width: 120,
color: Colors.amber,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 120,
color: Colors.white,
),
),
],
),
),
)
],
)
],
),
),
),
I want my UI to convert in vertical style whenever I tap on the arrow button like in Disney App Homepage
from this:
enter image description here
to this:
enter image description here
Which Widget I should Use so that Whenever Someone clicks on the right arrow button, it navigate to another page, and whatever Container in horizontal listview gets converted to vertical mode?
You might want a list view inside a list view
Here is an example code:
Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160.0, color: Colors.red,),
Container(width: 160.0, color: Colors.orange,),
Container(width: 160.0, color: Colors.pink,),
Container(width: 160.0, color: Colors.yellow,),
],
)
);
Widget horizontalList2 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 160.0, color: Colors.blue,),
Container(width: 160.0, color: Colors.green,),
Container(width: 160.0, color: Colors.cyan,),
Container(width: 160.0, color: Colors.black,),
],
)
);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Container(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
horizontalList1,
horizontalList2,
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
Here is the result:
Horizontal List view inside list view
I want to set text just as provided in design picture but I am getting text on top of my background image and I can't set it accordingly..
I have tried other things like putting "Container" on top and then applying Scaffold underneath but also it didn't work...
or is there any text property like "Margin" to margin text accordingly and other components too..
Here's my code:
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: size.height * 1,
width: size.width * 1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/bg.png'), fit: BoxFit.cover),
),
child: Column(
children: [
Text(
('Kleine.'),
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
Text(
//code
),
],
)),
],
),
),
);
```[![This is what I want][1]][1]
[![This is what I am getting "keline" on top][2]][2]
[1]: https://i.stack.imgur.com/9kpK5.png
[2]: https://i.stack.imgur.com/f4aIX.png
I want my text and other widgets to justify accordingly just as given in the provided image.
Use Stack Widget for this purpose and positioned or Align widget for set Text or image as per your requirement
sample code
class _LoginScreenState extends State<LoginScreen> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
key: _scaffoldKey,
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Stack(
children:<Widget> [
Center(
child: new Image.asset(
'assets/images/Login BG.png',
width: size.width,
height: size.height,
fit: BoxFit.fill,
),
),
Positioned(
top: size.height/4.5,
left: size.width/7,
right: size.width/7,
child: Image.asset(
"assets/Logo.png",
height: 200,
width: 200,
),
),
Positioned(
top: size.height/2.2,
left: size.width/11,
right: size.width/11,
child: Container(
height: 60,
width: 320,
child: TextFormField(
controller: _textLoginUserMnameController,
decoration: InputDecoration(labelText: 'Username'),
),
),
),
Positioned(
top: size.height/1.8,
left: size.width/11,
right: size.width/11,
child: Container(
height: 60,
width: 320,
child: TextFormField(
controller: _textLoginUserpasswordController,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
),
),
),
Positioned(
top: size.height/1.4,
left: size.width/5,
right: size.width/5,
child: GestureDetector(
child: Container(
height: 45,
width: 160,
child: Center(
child: Text("Sign in"),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: new LinearGradient(
colors: [
Color.fromARGB(255, 45, 120, 234),
Color.fromARGB(255, 89, 149, 240)
],
),
),
),
onTap: () {
//Login
},
),
),
],
),
)
),
);
}
You should use Stack widget in the scaffold body and in the children add the image first and thn add the column for all the text and textfields with appropriate padding and sizedboxes .
I am wondering how I can extend the background image to the app bar. Right now the background photo stops close to the app bar and the app bar is transparent.
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Color(0xFF18D191)),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/surf.jpg'),
fit: BoxFit.cover,
),
),```
Remove the AppBar from appBar parameter of scaffold.
Wrap the body of the scaffold with Stack and place the same AppBar at the bottom
body:Stack(
children:<Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/surf.jpg'),
fit: BoxFit.cover,
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child:AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Color(0xFF18D191)),
)
)
]
)
Unfortunately, I am not able to do it :(
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Color(0xFF18D191)),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/surf.jpg'),
fit: BoxFit.cover,
),
),
child: Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new StakedIcons(),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, bottom: 80.0),
child: new Text(
"Surf Spots",
style: new TextStyle(fontSize: 30.0),
),
),
],
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
child: new TextField(
decoration: new InputDecoration(labelText: 'Email'),
),
),
new SizedBox(
height: 25.0,
),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
child: new TextField(
obscureText: true,
decoration: new InputDecoration(labelText: 'Password'),
),
),
new Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 5.0, top: 10.0),
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) => HomePage ()
));
},
child: new Container(
alignment: Alignment.center,
height: 60.0,
decoration: new BoxDecoration(
color: Color(0xFF18D191),
borderRadius: new BorderRadius.circular(10.0)),
child: new Text("Login",
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0),
child: new Container(
alignment: Alignment.center,
height: 60.0,
child: new Text("Forgot Password",
style: new TextStyle(
fontSize: 17.0, color: Color(0xFF18D191))),
),
),
)
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: new Text("Create a New Account", style: new TextStyle(
fontSize: 17.0, color: Color(0xFF18D191), fontWeight: FontWeight.bold)),
),
],
),
),
],
),
),
),
);
}
}```