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.
Related
I'm new to flutter and try to learn while developing apps on my own. I have created a get started screen using one background image. I want to change 2-3 background images while the other texts and get started button remain same. how can I do that using flutter. please refer the below code. appreciate your help on this.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class GetStarted extends StatelessWidget {
const GetStarted({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: 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),
),
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,
)
)
),
],
),
),
);
}
}
I'm new to flutter and trying to learn some basic concepts. I want to add 3 background images to this same screen to slide automatically while all the text and buttons remaining the same. how can I do this using flutter. do I need to add 3 different pages to do this?? or can I do it in same file. appreciate your help on this.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class GetStarted extends StatelessWidget {
const GetStarted({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
//color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.4,
child:
Image.asset('assets/images/person1.png', fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
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,
)
)
),
],
),
),
);
}
}
I think you use this package: carousel_slider
Official link: https://pub.dev/packages/carousel_slider
Blog link: https://androidride.com/flutter-carousel-slider-example/
Thank You
I'm trying to make the barcode above the qrcode and I will like to make them in the same container, how should I edit it?
Thanks Alot!
body: SafeArea(
child: Center(
child: Column(
children: [
SizedBox(
height: 50,
child: SfBarcodeGenerator(
value: 'www.syncfusion.com',
),
),
Container(
decoration: BoxDecoration(
color: mFillColor,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: mBorderColor, width: 1),
),
margin: const EdgeInsets.only(left: 30, right: 30),
width: double.infinity,
height: 350,
child: Padding(
padding: const EdgeInsets.all(90.0),
child: QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
gapless: false,
),
),
),
],
),
),
),
What this code will show:
The effect that I want:
This is how you do this task. First you design a parent Container and then use a Column widget which contains two sizedBox as a children one is for barcode and second is for QrCode. Just like this
Scaffold(
body: SafeArea(
child: Container(
height: 250,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.black, width: 1),
),
margin: const EdgeInsets.all(30),
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 50,
child: SfBarcodeGenerator(
value: 'www.syncfusion.com',
),
),
const Text(
"2810 1102 0604 3155 4434 2047",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 150,
child: QrImage(
data: 'This is a simple QR code',
version: QrVersions.auto,
gapless: false,
),
),
const Text(
"Any text here",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
)
I am trying to add a background to my home page, however, it does not seem to be working. Any thoughts? I know how to add it per se, but unsure of how to structure it. I had received some advice to use a Stack, but I am unfamiliar with this method and the resources online are not clear.
Any advice on how to structure this would be appreciated.
Here is the background image code:
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/startbackground.jpg"),
fit: BoxFit.cover),
),
and here is the page code itself.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.orangeAccent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.teal,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style:
TextStyle(color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
);
}
}
It's confusing, but we don't actually need a DecoratedBox, rather a BoxDecoration (inside your container, for the decoration: argument).
:P
Here's an example:
class BackgroundImagePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.orangeAccent, // this has been moved up into BoxDeco
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://i.pravatar.cc/300'
)
)
),
height: double.infinity,
width: double.infinity,
... <snip> ...
If the Scaffold is a child of the background image code, than I guess the Scaffold background color is hiding the image.
Set transparent background color for the Scaffold:
Scaffold(
backgroundColor: Color.transparent,
...
This ended up working. See below.
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Image.asset(
"assets/startbackground.jpg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
body: Container(
color: Colors.transparent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60,fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style: TextStyle(
color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
)
]);
}
}
I want to align the text to the center inside the image as shown in the image.
I recently started working with flutter please help me to achieve the layout.
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
'assets/images/car.jpg',
fit: BoxFit.cover,
),
),
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
),
),
)
],
),
)
With the help of the above code, the text is appearing in the bottom-center instead of the center.
return Container(
width: MediaQuery
.of(context)
.size
.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
Images.image1,
fit: BoxFit.cover,
),
),
Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
)
],
),
);