How can I create this UI in flutter? please help me out : - flutter

https://i.stack.imgur.com/rQYu0.png
I'm new to flutter, and I've been trying to build this ui but it's way out of my league !
Here's my code so far:
(by the way I didn't use any specific package...)
My biggest challenge are the angles of that circle !
How can I create that circle? Is there a package for it ?
class NowPlaying extends StatefulWidget {
#override
_NowPlayingState createState() => _NowPlayingState();
}
class _NowPlayingState extends State<NowPlaying> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
Container(
color: btmGreen,
height: 60,
width: size.width,
child: Row(
children: <Widget>[
GestureDetector(
child:
cbutton(back),
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>NowPlaying()));
},
),
Spacer(),
Container(
height: 35,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
// topLeft: Radius.circular(30),
bottomLeft: Radius.circular(260)),
color : PrimaryGreen,
),
)
],
),
),
Container(
// color: Colors.white,
child: Row(
children: <Widget>[
buildVerticalMenu(size),
ClipRRect(
borderRadius: BorderRadius.circular(370),
child: Container(
color: Orange,
height: 400,
width: 400,
child: ClipRRect(
borderRadius: BorderRadius.circular(370),
child: Container(
// padding: EdgeInsets.fromLTRB(110, 110, 0.0, 110),
height: 360,
width: 360,
decoration: BoxDecoration(
color: PrimaryGreen,
borderRadius: BorderRadius.all(Radius.circular(200)),
image: DecorationImage(
alignment: Alignment.bottomCenter,
fit: BoxFit.fill,
image: AssetImage("assets/images/hiphop.jpg"),
),
),),
),
),
),
],
),
)
],
),
);
}
Widget buildVerticalMenu(Size size){
return Container(alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(60)),
color: Colors.white,
),
height: size.height*0.3,
width: 70,
child: RotatedBox(
quarterTurns: -1,
child: Text('Now Playing', style: TextStyle(fontSize: 20 , fontWeight: FontWeight.w700,color: PrimaryGreen),)),
);
}
}

Related

Image not showing Stack Widget in Flutter

I Want show Image above the Container Using Stack Widget but I don't Know how to do
I'm Tried Position and Align Widget it's Work but image half Image Not visible
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:navami/Controller/FirebaseController.dart';
import 'package:navami/env.dart';
import '../DatabaseServices/dbServices.dart';
import 'wallet.dart';
class DetailScreen extends StatelessWidget {
final String imageId;
final Map data;
DetailScreen(this.imageId, this.data);
final FirebaseController controller = Get.find();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
Hero(
tag: imageId,
child: Center(
child: Container(
alignment: Alignment.center,
height: 250,
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
image: DecorationImage(
image: NetworkImage(
data['image'],
),
fit: BoxFit.cover),
),
),
),
),
Text(
data['title'],
style: Theme.of(context).textTheme.displaySmall,
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: MediaQuery.of(context).size.height / 1.5,
decoration: BoxDecoration(
color: Colors.blue[600],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25))),
),
),
],
),
}));
}
}
This is Emulator ScreenShot
Screen Top 30 Padding after image and above the container then center of the container text
So I want this type of Screen
class WelcomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
height: h,
width: w,
child: Stack(
children: [
Container(
child: Image.asset(
'assets/images/welcome.png',
),
),
Positioned(
bottom: 10.0,
child: Container(
// height: h * 0.4,
width: w,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
)),
child: Column(
children: [
Container(
height: 140,
width: 200,
child: SvgPicture.asset(
'assets/images/Logoforstaicimage.svg',
),
),
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(left: 24, right: 24.0),
child: Text(
"Fitness is POWERFUL!! My mission is to bring people together, from all walks of life, with varying goals and abilities.",
textScaleFactor: 0.85,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Raleway',
color: Color(0xff76767c),
fontSize: 17,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
letterSpacing: 0,
),
),
),
],
),
),
),
],
),
),
);
}
}

how to make a button that it have a an image for background in flutter

I want to make a list of buttons.
how can I make buttons like this picture below?
You can use this code hope this will work for you, Thanks
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
const Test({Key? key}) : super(key: key);
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 500,
width: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(150)),
image: DecorationImage(image: NetworkImage('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg'),fit: BoxFit.cover)
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: (){},
child: buildImage(height: 60,width: 60,image:'https://media.istockphoto.com/photos/winter-in-the-sequoias-picture-id1292624259?s=612x612' ),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.only(right:10.0),
child: InkWell(
onTap: (){},
child: buildImage(height: 40,width: 40,image:'https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?s=612x612' ),
),
),
SizedBox(height: 10,),
InkWell(
onTap: (){},
child: buildImage(height: 60,width: 60,image:'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?s=612x612'),
),
SizedBox(height: 10,),
Padding(
padding: const EdgeInsets.only(right:10.0),
child: InkWell(
onTap: (){},
child: buildImage(height: 40,width: 40,image:'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?s=612x612' ),
),
),
],
),
),
),
);
}
Widget buildImage({String ?image,double? height,double? width}){
return Container(
height: height,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: Colors.white,width: 2.0),
image: DecorationImage(image: NetworkImage(image.toString()),fit: BoxFit.cover)
),);
}
}
You can check out the following code:
Column(
children: [
GestureDetector(
onTap: () {
print('do something');
},
child: Container(
width: 60,
height: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 4),
borderRadius: const BorderRadius.all(Radius.circular(20)),
image: const DecorationImage(
image: AssetImage("images/home_tr_location.png"),
fit: BoxFit.cover
)), // button text
),
),
GestureDetector(
onTap: () {
print('do something');
},
child: Container(
width: 60,
height: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 4),
borderRadius: const BorderRadius.all(Radius.circular(20)),
image: const DecorationImage(
image: AssetImage("images/home_tr_location.png"),
fit: BoxFit.cover
)), // button text
),
),
GestureDetector(
onTap: () {
print('do something');
},
child: Container(
width: 60,
height: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 4),
borderRadius: const BorderRadius.all(Radius.circular(20)),
image: const DecorationImage(
image: AssetImage("images/home_tr_location.png"),
fit: BoxFit.cover
)), // button text
),
),
//Add As many buttons as you like inside column
],
),
Make a column widget and use card as children
Use card and wrap it with gesture detector
set the background image of each card
on tap, change the background image by using index of card tapped

how to stack image to show in the background

Please pardon me to post this.
i am working with this design more that 3 days now i can i get the actual design. all my effort design is been rejected.
i am trying to create this design.
the problem i have is the right and left box showing at the back of the image.
thanks in advance.
here is my code
Container(
child: Card(
shape:RoundedRectangleBorder(borderRadius:
BorderRadius.circular(25.0),
),
semanticContainer:true,
clipBehavior:
Clip.antiAliasWithSaveLayer,
child:Image(image:
NetworkImage(snapshot.data.docs[index].data()['picture'], ),
fit: BoxFit.cover,), ),),);
Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.pinkAccent,
Colors.yellowAccent,
],
),
),
child: Stack(
children: [
Positioned(
left: 70,
// right: 40,
top: 40,
child: Transform.rotate(
angle: pi - 3.30,
child: Container(
// transform: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white.withOpacity(0.2),
),
height: 200,
width: 150,
),
),
),
Positioned(
left: 130,
// right: 150,
top: 78,
child: Transform.rotate(
angle: pi + 3.30,
child: Container(
// transform: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white.withOpacity(0.6),
),
height: 190,
width: 150,
),
),
),
Positioned(
left: 0,
right: 0,
top: 50,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 100.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
image: DecorationImage(
image: NetworkImage("https://picsum.photos/200/300"),
fit: BoxFit.fill
),
),
height: 220,
width: 100,
),
),
),
],
),
),
);
Result
If you like change, black shadow play with stops inside gradient. hope you will get the idea of doing it.
stops: [.5, 1.0],
To AlignWidgte change this valuealignment: Alignment(-1, -1),. For rotation change here. Better use slider or from dart:math use pi.
Transform.rotate(angle: -.166,
Code snippet
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
get imageWidth => 300;
get imageHeight => 450;
double sliderVal = 0.0;
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
),
),
home: Scaffold(
body: Column(
children: [
Slider(
value: sliderVal,
onChanged: (v) {
setState(() {
sliderVal = v;
print(sliderVal);
});
}),
Container(
width: imageWidth * 1.4,
height: imageHeight * 1.1,
child: Stack(
children: [
Align(
alignment: Alignment(-1, -1),
child: Transform.rotate(
angle: -.166,
child: backImage(color: Colors.blue),
),
),
Align(
alignment: Alignment(1, 1),
child: Transform.rotate(
angle: .128,
child: backImage(color: Colors.yellow),
),
),
Center(
child: mainImage(),
),
],
),
),
],
),
),
// CustomSS(),
);
}
backImage({required Color color, double? width, double? height}) {
return Container(
width: width ?? imageWidth,
height: height ?? imageHeight,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
),
);
}
SizedBox mainImage() {
return SizedBox(
width: imageWidth,
height: imageHeight,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
"assets/me.jpg",
fit: BoxFit.cover,
),
Container(
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [.5, 1.0],
colors: [
Colors.transparent,
Colors.black87,
],
),
),
),
Positioned(
bottom: 30,
left: 30,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Text(
"Yeasin",
style: TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
SizedBox(
width: 8,
),
Text(
"XX",
style: TextStyle(
fontSize: 22,
color: Colors.white,
),
)
],
),
SizedBox(
height: 10,
),
Text(
"Description",
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
]),
)
],
),
));
}
}

How to cut through an Opacity Widget in flutter?

I want to remove opacity from the center of a container to make the picture below it to be visible.
What I want:
What I tried:
Code I Tried:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class AppFour extends StatefulWidget {
#override
_AppFourState createState() => _AppFourState();
}
class _AppFourState extends State<AppFour> {
String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.cover,
),
),
),
Opacity(
opacity: 0.5,
child: Container(
color: Colors.white,
),
),
Center(
child: Container(
height: MediaQuery.of(context).size.height / 1.5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.fitHeight),
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.white,
width: 2.0,
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 10.0)
],
),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[800],
child: Transform.rotate(
angle: 45,
child: Icon(FontAwesomeIcons.syncAlt),
),
onPressed: () {},
),
);
}
}
I've modified your code to have the effect of the image that you gave as an example:
Screenshot
Code
String img = 'https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.cover,
),
),
),
Opacity(
opacity: 0.5,
child: Container(
color: Colors.white,
),
),
Center(
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.white,
width: 5.0,
),
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 0.0),
blurRadius: 10.0
)
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: Align(
alignment: Alignment.center,
widthFactor: 0.75,
heightFactor: 0.75,
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: NetworkImage('$img'),
fit: BoxFit.fitHeight
),
),
),
),
),
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.grey[800],
child: Transform.rotate(
angle: 45,
child: Icon(FontAwesomeIcons.syncAlt),
),
onPressed: () {},
),
);
}

Create curved card with shadow

I really need you because I don't have even start idea how to implement these, and also I am not sure how it is called.
Actually, I want to implement something similar like on image (this little circle in each of cards - that is like chain between two cards).
With help of key I have made image from up with this code:
class InfoPage extends StatefulWidget {
InfoPage();
#override
_InfoPageState createState() => _InfoPageState();
}
class _InfoPageState extends State<InfoPage> {
InfoItemModel infoData = dataSourceInfoUser;
double basicSize = 70;
#override
initState() {
super.initState();
}
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Container(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
child: AppCardField(
child: Text('Something'),
),
),
_buildCardWithCircle(
bgCircleX: 0.78,
bgCirceY: -2.0,
innerContainerX: 0.756,
innerContainerY: -1.78,
colorInner: Colors.orange
),
],
),
),
),
);
_buildCardWithCircle({double bgCircleX, double bgCirceY, double innerContainerX, double innerContainerY, Color colorInner}) => Container(
width: double.infinity,
height: 150,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
child: AppCardField(
child: Text('Something'),
),
),
Align(
alignment: Alignment(bgCircleX, bgCirceY),
child: Container(
height: basicSize,
width: basicSize,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50.0),
),
),
),
Align(
alignment: Alignment(innerContainerX, innerContainerY),
child: Container(
height: basicSize - 10,
width: basicSize - 10,
decoration: BoxDecoration(
color: colorInner,
borderRadius: BorderRadius.circular(50.0),
),
child: Icon(Icons.vertical_align_center),
),
),
],
),
);
}
class AppCardField extends StatelessWidget {
final Widget child;
final double height;
final double paddingVertical, paddingHorizontal;
final double paddingVerticalChild, paddingHorizontalChild;
AppCardField({
this.child,
this.height,
this.paddingVertical = 8,
this.paddingHorizontal = 16,
this.paddingVerticalChild = 8,
this.paddingHorizontalChild = 16,
Key key})
: super(key: key);
#override
Widget build(BuildContext context) => Padding(
padding: EdgeInsets.symmetric(
vertical: paddingVertical, horizontal: paddingHorizontal),
child: Container(
height: height,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.all(Radius.circular(8)),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 15.0,
offset: Offset(0.0, 5.0),
),
],
),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: paddingVerticalChild,
horizontal: paddingHorizontalChild),
child: child,
),
));
}
But here, I have problem with shadow of the card and strongly white background of circle, OFC I need this shadow to be also in this white space, question is how to solve this?
Something like this
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Some Stuff"),
),
body: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20.0
)
]
),
child: Card(
elevation: 20.0,
color: Colors.blueGrey,
child: Text('Something'),
),
),
SizedBox(height: 10.0,),
Container(
width: double.infinity,
height: 150.0,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 150.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 20.0
)
]
),
child: Card(
elevation: 20.0,
color: Colors.blueGrey,
child: Text('Something'),
),
),
Align(
alignment: Alignment(0.9,-1.5),
child: Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
),
),
Align(
alignment: Alignment(0.88,-1.35),
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(25.0),
),
),
),
Align(
alignment: Alignment(0.85, -1.2),
child: Icon(Icons.access_alarms, color: Colors.white,)
),
],
),
),
],
),
),
);
then you just reaped the card for the other once with different alignment values.