I'm trying to position a button in custom place in Flutter web app but i cant.
Here is my code:
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context)
.size; // This method will give us the height and width of our device screen
return Container(
height: size.height,
width: size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/687.jpg"), fit: BoxFit.cover)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
color: Colors.black,
onPressed: () {},
child: Text("Login"),
textColor: Colors.white,
),
],
));
}
}
Here is picture for demonstration the custom place that i want:
You can use the container set full width to it, add margin and place button inside it.Margin help to adjust the button n any place.
or you can user Positioned Widget
example:
new Positioned(
left: MediaQuery.of(context).size.width/2+100,
top: MediaQuery.of(context).size.height/2,
child: new Container(
width: 100.0,
height: 80.0,
decoration: new BoxDecoration(color: Colors.red),
child: new Text('hello'),
)
Related
I have a PageView with images list inside. I want to keep the image ratio and set a rounded corners to them.
Usually I had no problem to clip image inside simple list or single image.
But in this case, the ClipRRect is not wrapping the image and when I'm setting size to red Container nothing happened.
Result :
Code :
double maxiHeight = 250;
List<Widget> postList = [];
#override
void initState() {
for(Post p in Model.instance.postList) {
postList.add(post(p));
}
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
height: maxiHeight,
child: PageView(
controller: PageController(viewportFraction: 0.5),
children: postList
),
);
}
Widget post(Post post) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
margin: EdgeInsets.only(right: 10),
color: Colors.red,
child: Image.network(post.thumb, height: 50)
)
);
}
I want to keep my image ratio.
What am I missing here ?
About your code snippet, you are providing margin right 1st then wrapping with ClipRRect. Here the main Container is getting its size and then using margin, after wrapping with ClipRRect it is avoiding 10px from right to Clip. And this is how we are getting current output.
But we want padding outside The Container and without border radius. Means after decorating the image, just provide some padding. You can follow this and using fit: BoxFit.cover will cover the widget size.
Center(
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
// margin: EdgeInsets.only(right: 10),// not here
color: Colors.red,
child: Image.network(
// post.thumb,
"https://unsplash.it/1440/3040?random",
// fit: BoxFit.fitHeight,
height: 150,
),
),
),
),
),
With the following modified code it should work:
#override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 500.0,
child: ListView(scrollDirection: Axis.horizontal, children: postList),
),
);
}
Widget post(String uri) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(uri, fit: BoxFit.fitHeight)
),
);
}
Try to add BoxFit.cover to Image.network widget
Widget post(Post post) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
margin: EdgeInsets.only(right: 10),
color: Colors.red,
child: Image.network(post.thumb, height: 50, fit: BoxFit.cover,),
)
);
}
I am trying to set a background Image for a screen which takes about 25% of the screen,positioned at the top.
I have tried,
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
//Go to Settings Page
},
)
],
),
body: Container(
width: double.infinity,
alignment: Alignment.topCenter,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
image: AssetImage(
"assets/images/image1.png",
),
),
),
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 200,
width: 220,
color: Colors.purple,
),
Container(
height: 200,
width: 220,
color: Colors.pink,
),
It does not align itself to top.Is there any easier way?
I have tried using stack too.
This is what I am getting:
Expected.
Take container as the body of the Scaffold and then set your image as background image inside container decoration.
Don't forget to set the width and height for the container like this:
width : Mediaquery.of(context).size.width
height : Mediaquery.of(context).size.height
I want to open new page when I swipe the circle in the middle of the screen. that is when I swipe blue circle left a new page should open and when I swipe right another new page should open.
Similarly when I swipe pink circle bottom another new page should open
Here is my code:
import 'package:flutter/material.dart';
class FirstRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 300.0,
width: 150.0,
child: Stack(
children: <Widget>[
Positioned(
top: 25,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.lightBlue,
),
),
),
Positioned(
bottom: 25,
child: Opacity(
opacity: 0.45,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.pinkAccent,
),
),
),
),
],
),
),
),
);
}
}
wrap Positioned() with SwipeDetector() Widget
Have a look at this example
SwipeDetector(
onSwipeRight: () {
//push new page
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new YourNewPage()));
},
child: //Your circle here
Positioned(
top: 25,
child: Container(
height: 150.0,
width: 150.0,
decoration: BoxDecoration(
shape:BoxShape.circle,
color:Colors.lightBlue,
),
),
),
)
I am using a SingleChildScrollView with a Stack as its first element. The Stack contains two containers. The second one is positioned at bottom: 0.0 using a Positioned.
I highly simplified my view for this post to focus only on this issue. When I scroll slowly, you can see that the white container is "glitching" and you see a line that is the bottom of the first child of the stack.
Here is the view:
Not that's what happen when I scroll down, I have no clue why it's glitching like that:
View:
return Container(color: Colors.white, child: SingleChildScrollView(child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
HeaderComponent(),
Container(height: 600, width: MediaQuery.of(context).size.width)
]
)));
Header Component
class _HeaderComponentState extends State<HeaderComponent> {
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(height: 245.0, width: MediaQuery.of(context).size.width, color: Colors.red),
Positioned(bottom: 0.0, child: Container(height: 40.0, width:
MediaQuery.of(context).size.width, color: Colors.white)),
],
);
}
}
If that, just add bottom padding 0.2 at first child.
class HeaderComponent extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: 245.0,
padding: EdgeInsets.only(bottom: 0.2),
width: MediaQuery.of(context).size.width,
color: Colors.red),
Positioned(
bottom: 0.0,
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width,
color: Colors.white)),
],
);
}
}
I don't know root cause. But Positoned's 'bottom: 0.0' occurs upper container's background color a little during scrolling.
So when I set 'bottom: -0.2', this problem is not occured.
But it does not looks cool...
class HeaderComponent extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: 245.0,
width: MediaQuery.of(context).size.width,
color: Colors.red),
Positioned(
bottom: -0.2,
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width,
color: Colors.white)),
],
);
}
}
I suggest another solution like below.
class HeaderComponent extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 245.0,
child: Column(
children: <Widget>[
Expanded(
child: Container(
width: MediaQuery.of(context).size.width, color: Colors.red),
),
Container(
height: 40.0,
width: MediaQuery.of(context).size.width,
color: Colors.white)
],
),
);
}
}
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',
))),
),
),
)
],
);
}
}