Flutter - Problem about Transform with Network Image and Expanded Text - flutter

I'm trying to create a simple Container includes;
A text aligned to center left (that text can include 50 characters)
A network image which is aligned to bottom right, rotated a bit, and rounded.
I've written a code like this:
import 'package:flutter/material.dart';
class MyScreen extends StatefulWidget {
static const String idScreen = "myScreen";
#override
_MyScreenState createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("My Screen")),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 100,
alignment: Alignment.bottomRight,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadiusDirectional.circular(16.0),
color: Colors.yellow),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Baby",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
Transform(
child: Image.network(
"https://target.scene7.com/is/image/Target/Baby-210913-1631564062108?wid=315&hei=315&qlt=60&fmt=png",
fit: BoxFit.contain,
),
transform: Matrix4.rotationZ(-0.2),
alignment: FractionalOffset.centerRight,
),
],
),
),
),
],
),
);
}
}
But the output is:
In order to avoid white square in image, I tried to add my picture in Transform like:
Container(
width: 50,
height: 50,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.contain,
image: NetworkImage(
"https://target.scene7.com/is/image/Target/Baby-210913-1631564062108?wid=315&hei=315&qlt=60&fmt=png"
)
)
)
But flutter doesn't accept it in Transform widget. How can I solve this?
Also another problem; if I write "Baby" like "Baby Baby Baby Baby Baby Baby Baby Baby ", it gives overflow error. I tried to wrap my Text or Row with Expanded but didn't work. How can I solve this too?

Related

Center Image In Container's child column flutter

I want to align image in center in column and increase size of image.
My desired look
This is what I got by using code
Here is my code:
class BigRoundedContainer extends StatelessWidget {
final String image, text;
const BigRoundedContainer({Key? key, required this.image, required this.text}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: 145.w,
height: 145.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Dimensions.radius40),
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withOpacity(0.5),
blurRadius: Dimensions.radius10,
offset: const Offset(0.0, 10),
)
],
),
child: Padding(
padding: EdgeInsets.only(bottom: Dimensions.height10),
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Expanded(
child: Image.asset(
image,
color: AppColors.fIconsAndTextColor,
),
),
SmallText(text: text, size: Dimensions.height20),
]),
),
);
}
}
This is how im using BigRoundedContainer
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
BigRoundedContainer(
image: "assets/images/agency.png",
text: LanguageStringKeys.instance.agency.tr,
),
BigRoundedContainer(
image: "assets/images/freelancer.png",
text: LanguageStringKeys.instance.freelancer.tr,
),
),
],
While you are using Expanded, you can skip size params on Image. Include fit: BoxFit.cover
Expanded(
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
try this:
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Image.asset(
image,
color: AppColors.fIconsAndTextColor,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: SmallText(text: text, size: Dimensions.height20),,
)
you can play with SmallText's padding to get your desire space.
Give padding all in parent container then give image width height and margin between the text

Absolute positioning on the screen, and overlay of image of to the top portion of app

Absolute positioning on scaffold/screen.
1 - The white container in the 1st photo - how to align this as an absolute position on the bottom of the screen / how is it done as the best method?
2 - The container has to be overlaid on the top of the image.
Tried to give absolute positioning using stack on the screen/scaffold, didn't work.
Use the following code:
class SampleWidget extends StatefulWidget {
const SampleWidget({super.key});
#override
State<SampleWidget> createState() => _SampleWidgetState();
}
class _SampleWidgetState extends State<SampleWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/mountains-valleys-and-clouds-vertical-panorama-rick-deacon.jpg'))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 400,
),
Expanded(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
child: const Center(
child: Text(
"The new adventure begin here",
style: TextStyle(fontSize: 22),
)),
),
),
],
),
),
);
}
}
Output:

Multiple buttons/Texts in a circle in flutter

I'm trying to create a circle in the flutter. I want to add multiple buttons and bound them in a circle like this.
The marked fields are supposed to be buttons and Course 1 is just the text.
I am able to create something like this but it is only string splitted in the button.
Here is my code for this. I'm not getting any idea about how to do this task. I'm new to flutter.
import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: Text("Student home"),
),
body:Center(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: 200,
height: 200,
child: Center(
child: Text("Course 1 \n Course 2",
style: TextStyle(fontSize: 12.0,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
),
decoration: BoxDecoration(
border:Border.all(width:3),
borderRadius: BorderRadius.all(
Radius.circular(50),
),
color: Colors.yellow,
),
),
)
),
);
}
}
try shape: BoxShape.circle,,
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 2),
shape: BoxShape.circle,
// You can use like this way or like the below line
//borderRadius: new BorderRadius.circular(30.0),
color: Colors.amber,
),
child:Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('ABC'),
Text('XYZ'),
Text('LOL'),
],
),
),
Output
is this design that you want?
it contain two button and one text widget
body: Center(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: 200,
height: 200,
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Course 1",
style: TextStyle(
fontSize: 12.0,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
MaterialButton(
onPressed: () {
//do whatever you want
},
child: Text("Mark Attendance"),
),
MaterialButton(
onPressed: () {
//do whatever you want
},
child: Text("Mark Attendance"),
),
],
),
),
decoration: BoxDecoration(
border: Border.all(width: 3),
borderRadius: BorderRadius.all(
Radius.circular(200),
),
color: Colors.yellow,
),
),
),
There are multiple ways to make the border round. As of now you are using fixed height and width always use greater number for border-radius.
For eg.
when your heigh is 200X200 use 150-200 number for border-radius.
here is the code which works fine when you have fixed height and width of the container.
Note: This works only fine when your heigh and width is fixed for the container because the padding in the code is static.If you want dynamic then please use the screen calculation techniques to make if responsive
Making any widget clickable in the Flutter.
There are a couple of Widgets available to make any widget clickable
Gesture Detector
This widget has many methods including onTap() which means you can attach a callback when the user clicks on the widget. For eg (this is used in your code)
GestureDetector(
onTap: (){}, //this is call back on tap
child: Text("Mark Attendance")
)
InkWell Widget (Note: This widget will only work when it is a child of the Material widget)
Material(
child: InkWell(
onTap: (){},
child: Text("Mark Attendance"),
),
)
Here is the working code.
import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: new AppBar(
title: Text("Student home"),
),
body:Center(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
width: 200,
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom:40.0,top: 20.0),
child: Text("Course 1"),
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: (){},
child: Text("Mark Attendance")),
),
Padding(
padding: const EdgeInsets.all(8.0),
child:Material(
child: InkWell(
onTap: (){},
child: Text("Mark Attendance"),
),
)
),
],)
],
),
decoration: BoxDecoration(
border:Border.all(width:3),
borderRadius: BorderRadius.all(
Radius.circular(150),
),
color: Colors.yellow,
),
),
)
),
);
} }
Note: Material widget always set the background as white for the text
widget
Thanks, I hope is information was helpfull

how to overlay a circular image on the top of a card (half in the card and half outside the card)?

I'm new to flutter and recently I tried to design a page where I have to put an image on the top of a card with half of it on the card and half of it outside the card, I tried Stack but couldn't design what I wanted!
here is an example of what I'm trying to design.
here is the code that isn't giving the desired result like the image below:
class ContainerWithCircle extends StatelessWidget {
final double circleRadius = 100.0;
final double circleBorderWidth = 8.0;
#override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
width: circleRadius,
height: circleRadius,
decoration:
ShapeDecoration(shape: CircleBorder(), color: Colors.white),
child: Padding(
padding: EdgeInsets.all(circleBorderWidth),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
))),
),
),
),
Padding(
padding: EdgeInsets.only(top: circleRadius / 2.0),
child: Container(
// Some content
),
),
],
);
}
}
In order to create a layout like the one you specified, you can simply use a Stack and place the card with a padding to the top. Resources for you to look up: Stack, DecoratedBox & CircleBOrder. The following code shows an example implementation:
class ContainerWithCircle extends StatelessWidget {
final double circleRadius = 100.0;
final double circleBorderWidth = 8.0;
#override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: circleRadius / 2.0),
child: Container(
//replace this Container with your Card
color: Colors.white,
height: 200.0,
),
),
Container(
width: circleRadius,
height: circleRadius,
decoration:
ShapeDecoration(shape: CircleBorder(), color: Colors.white),
child: Padding(
padding: EdgeInsets.all(circleBorderWidth),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
))),
),
),
)
],
);
}
}

How do I do the "frosted glass" effect in Flutter?

I'm writing a Flutter app, and I'd like to use/implement the "frosted glass" effect that's common on iOS. How do I do this?
You can use the BackdropFilter widget to achieve this effect.
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new FrostedDemo()));
}
class FrostedDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: new FlutterLogo()
),
new Center(
child: new ClipRect(
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5)
),
child: new Center(
child: new Text(
'Frosted',
style: Theme.of(context).textTheme.display3
),
),
),
),
),
),
],
),
);
}
}
I think I don't know the exact meaning of 'Frosted'(If my example didnot work here),
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() => runApp(
MaterialApp(
title: "Frosted glass",
home: new HomePage()
)
);
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
fit: StackFit.expand,
children: <Widget>[
generateBluredImage(),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
rectShapeContainer(),
],
),
],
),
);
}
Widget generateBluredImage() {
return new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/images/huxley-lsd.png'),
fit: BoxFit.cover,
),
),
//I blured the parent container to blur background image, you can get rid of this part
child: new BackdropFilter(
filter: new ui.ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: new Container(
//you can change opacity with color here(I used black) for background.
decoration: new BoxDecoration(color: Colors.black.withOpacity(0.2)),
),
),
);
}
Widget rectShapeContainer() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 10.0),
padding: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
//you can get rid of below line also
borderRadius: new BorderRadius.circular(10.0),
//below line is for rectangular shape
shape: BoxShape.rectangle,
//you can change opacity with color here(I used black) for rect
color: Colors.black.withOpacity(0.5),
//I added some shadow, but you can remove boxShadow also.
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black26,
blurRadius: 5.0,
offset: new Offset(5.0, 5.0),
),
],
),
child: new Column(
children: <Widget>[
new Text(
'There\'s only one corner of the universe you can be certain of improving and that\'s your own self.',
style: new TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
],
),
);
}
}
Outcome:
I hope this will help someone.
BackdropFilter(
filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
child: Container(
color: Colors.black.withOpacity(_opacity),
),
),