Related
I'm new to flutter and working on developing my flutter coding skills. I want to display 3 background images in a carousel while other texts and button remain same on the screen. in the below code, image carousel is working properly but my Get Started button and other texts not displaying at all. what should I do for correct this issue. appreciate your help on this.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person1.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//2nd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person2.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//3rd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person3.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 810.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 16,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 1,
),
),
Padding(
padding: const EdgeInsets.only(left: 40, bottom: 230),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Meet \nYour Doctor\nHere',
style: TextStyle(
height: 1.2,
fontFamily: 'Dubai',
fontSize: 35,
color: Color(0xffFAFAFA),
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(left: 30, top: 26),
child: Align(
alignment: Alignment.topLeft,
child: Text('DOCTOR',
style: TextStyle(
fontFamily: 'Dubai',
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(bottom: 60),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 320,
height: 65,
child: ElevatedButton(
onPressed: () {},
child: Text(
'Get Started',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.normal),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xff05ABA3)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50.0),
),
))),
)),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
),
height: 5,
width: 120,
))),
],
),
);
}
}
you can set image in background using BoxDecoration in container-
Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'imagename'),
fit: BoxFit.fill,
),
shape: BoxShape.circle,
),
)
On your Scaffold's body: you are using ListView. You can still find those widgets by scrolling down.
For your case, you like to have text and button widgets over the UI.
You need to replace ListView with Stack on body.
return Scaffold(
body: Stack( // this
children: [
CarouselSlider
More about Stack and ListView.
In my mobile app I am expecting the tennis ball image to be there in right top corner
Image Expected
But currently it looks like this,
Image Current
the code is as below,
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: AssetImage(
'assets/transperent_tennis_ball_icon_green.png'),
),
),
),
]
),
)
Please advise how can I get this done?
Try below code hope its help to you. You used Stack widget and Positioned Widget for that. just replace my image with your image.
Center(
child: Stack(
children: [
Container(
padding: EdgeInsets.all(20),
height: 100,
width: 200,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Submit Score',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Game Report',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
],
),
),
Positioned(
right: -30,
top: -30,
child: Image.network(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
height: 100,
width: 80,
),
),
],
),
),
Your result screen->
you can use stack
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
children: [
Positioned(
top:-25,
right:-25,
child: Container(
height: 66,
width:66,
decoration: BoxDecoration(
shape:BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/500/300?random=1"),
),
),
)
)
])
)]
),
),
just use stack widget to achive this design .
I want to display the text under the images. I am able to see the Images and text, but My text is overflowing. I want to display it on each text under each image. Below is my code.
What should I do to solve this situation.
Widget firstStyleRow(String ImgPath1, String ImgPath2, String avatarImg) {
return Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage(ImgPath1),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('assets/chris.jpg'),
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('assets/letter.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
],
),
);
}
Try below code hope its help to you.add your inside row widget wrap it with Expanded or Flexible, just change my images with your images
Container(
height: 250.0,
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
children: [
Expanded(
child: Container(
height: 250.0,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 125.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 15.0,
),
Text(
'i like the wy to show more item',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
height: 30.0,
width: 30.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
),
),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'mon hll',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
'10:28 pm',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
],
),
),
),
),
SizedBox(
width: 10.0,
),
Container(
height: 350,
width: (MediaQuery.of(context).size.width - 30.0) / 2,
child: Container(
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
'i hvxxxx',
style: TextStyle(
fontSize: 50,
),
),
),
),
],
),
),
Your result screen->
I have used a FittedBox() for Text widget and the issue is I could not set font size of my choice. I have tried some specific font sizes but the font remains same. Here is the screenshot of UI I am talking about Image1, highlighted with blue color.
This is the code snippet.
Container(
color: Colors.black,
width: double.infinity,
constraints: BoxConstraints(minHeight: 30),
padding: EdgeInsets.symmetric(horizontal: 5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.blue,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Qty',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
flex: 2,
child: Container(
alignment: Alignment.center,
// color: Colors.blue[200],
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Description',
style: TextStyle(
color: Colors.white,
// fontSize: textSize,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
child: Container(
//width: MediaQuery.of(context).size.width * 0.07,
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Price',
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
Container(
width: 10,
child: VerticalDivider(
color: Colors.white,
),
),
Expanded(
child: Container(
// width: MediaQuery.of(context).size.width * 0.07,
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'Extend',
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
),
),
],
),
),
I have also tried to reduce the widget height using BoxConstraints property but it is also not working. Anyone help me please to solve this issue.
I want to align the text over the image to the bottomLeft corner, but even aligning it to the bottomLeft it still stays at topLeft corner. So, help me to know what's wrong or missing in my code to acheive the following image text layout.
My output
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
width: 300,
height: 220,
alignment: Alignment.bottomLeft,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image1.png'),
fit: BoxFit.cover),
),
child: Column(
children: <Widget>[
Text(
"Jerusalem",
style: TextStyle(
fontFamily: 'AirbnbCerealBold',
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text("1,243 Place", style: TextStyle(
fontFamily: 'AirbnbCerealBook',
fontSize: 14,
color: Colors.white),
),
],
),
),
Container(
width: 300,
height: 220,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image3.png'),
fit: BoxFit.cover),
),
),
],
),
),
Use a stack with fixed height and width, then use a Positioned/Align/ any absolute positioning widgets to place anywhere in the box. Beware the stack order is last child is first on screen
The Stack widget will place widgets on top of each other with no responsiveness to each other only to the parent Stack - like Absolute child to relative parent in CSS/HTML
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
width: 300,
height: 220,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
fit: BoxFit.cover,
image: AssetImage('assets/image1.png'),
),
Positioned(
bottom: 0,
left: 0,
child: Column(
children: <Widget>[
Text(
"Jerusalem",
style: TextStyle(
fontFamily: 'AirbnbCerealBold',
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
"1,243 Place",
style: TextStyle(
fontFamily: 'AirbnbCerealBook',
fontSize: 14,
color: Colors.white),
),
],
),
),
],
),
),
],
),
)