I have Column and inside it I am using 7 Expanded widgets and one of them is ClipRRect, but there is a problem: It is not circle.
I think there are 2 ways:
Wrap it with a container and give it's hight value to it's width but I don't know how?
Use another widget?
As I use CachedNetworkImage, I can't use CircleAvatar.
Expanded(),
Expanded(),
Expanded(),
Expanded(
flex: 5,
//padding: EdgeInsets.symmetric(horizontal: 10),
child: TabBarView(
controller: _tabController,
children: <Widget>[
Center(
child: Text(
'tracks',
style: TextStyle(color: Colors.white),
)),
Container(
height: 20,
width: 20,
color: Colors.red,
child: AnimatedBuilder(
animation: _animationController,
child: AspectRatio (
aspectRatio: 1,
child: ClipOval(
//borderRadius: BorderRadius.circular(10000000.0),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: thisSongInfo.albumImageUrl,
),
),
),
builder: (BuildContext context, Widget child) {
return Transform.rotate(
child: child,
angle: _animationController.value * 2.0 * math.pi,
);
},
),
),
Center(
child: Text(
'information',
style: TextStyle(color: Colors.white),
),
),
],
),
),
Expanded(),
Expanded(),
Expanded(),
I edit and put all code inside that expanded
also I put debugPaintSizeEnabled = true; im main
link:
https://imge.to/i/fU8vi
Wrap your ClipRRect widget with an AspectRatio widget with an aspectRation value of 1. This forces the child widget to be square.
Or, if suitable, use a CircleAvatar widget which displays its child in a circle - this could replace both the AspectRatio and the ClipRRect widgets.
Edit: This is actually because of the TabBarView which forces its children to be full width for some reason. Wrap the child of the TabBarView within a Row so that it's allowed to resize itself horizontally.
Related
I'm developing a desktop app using Flutter, which have three widgets as above, a scrollable widget, an expended widget with a min-width, and a fixed-width widget. Notice that, the first widget is a horizontal scroll widget, so its width depends on its contents.
I know the whole width, but to set the max-width of the scrollabe widget, I need to know the min-size of the Expanded widget and the width of the fixed-width widget.
As a newbie of Flutter, I really have no idea how to layout these widgets.
Andbody help!
Few ways of providing space like providing flex on Flexiable/Expnaded widget, using LayoutBuilder/MediaQuery or just provide Expanded one of it to get available space.
You can test this widget
return Scaffold(
body: LayoutBuilder(
// in case of needed
builder: (context, constraints) {
return Row(
children: [
SizedBox(
width: constraints.maxWidth * .6,
child: ListView.builder(
itemBuilder: (context, index) => ListTile(
tileColor: index.isEven ? Colors.red : Colors.deepPurple,
),
)),
//or just use Expanded for available width
Expanded(
child: Container(
// width:constraints.maxWidth * .4-100,
// constraints: BoxConstraints(
// minWidth: 200,
// // constraints.maxWidth * .6 - 100,
// maxWidth: constraints.maxWidth * .4 - 100,
// ),
color: Colors.cyanAccent,
child: Column(
children: [
Text("an Expamed with min 2idth"),
],
),
),
),
Container(
width: 100,
height: 200,
color: Colors.red,
child: Text("Fixed-width widget"),
)
],
);
},
),
);
You can use a row and use containers with constrains to achieve this layout. For example.
Row(
children:[
Container(
constrains: BoxConstrain(
maxWidth: MediaQuery.of(context).size.width*0.5
),
child: SingleChildScrollView ()
),
Expanded(
child : Container(
constrain : BoxConstrain (
minWidth : MediaQuery.of(context).size.width*0.2
)
)
),
SizedBox(
width: MediaQuery.of(context).size.width*0.3,
)
]
)
[enter image description here][1]
Inside My column, there is a stack, a carousel slider,a gridview builder. I want to scroll all of them together. I tried to use singlechildscrollview as you can see in the code below. Please Someone help me how can I scroll those things together.
[1]: https://i.stack.imgur.com/FYexC.png` enter code here`
Scaffold(
backgroundColor: Colors.orange,
// Color(0xFFFFF176),
body: SingleChildScrollView(
child: Column(
children: [
Expanded(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
CarouselSlider(
items: slideImage
.map((image) =>
Builder(builder: (BuildContext context) {
return Container(
height: 200,
width: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
image: DecorationImage(
image: AssetImage(image),
fit: BoxFit.fill),
),
);
}))
.toList(),
options: CarouselOptions(
onPageChanged: (index, reason) {
setState(() {
activeIndex = index;
});
},
height: 300,
viewportFraction: 1,
autoPlay: true,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: AnimatedSmoothIndicator(
activeIndex: activeIndex, count: slideImage.length),
),
],
),
),
SizedBox(
height: 10,
),
Expanded(
child: GridView.builder(
shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
itemCount: menuImage.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemBuilder: (context, index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Color(0xFFFFFDE7),
elevation: 10,
child: GridTile(
child: Column(
children: [
Image.asset(
menuImage[index],
fit: BoxFit.fill,
),
Text(
title[index],
style: TextStyle(fontSize: 18),
),
],
),
),
),
),
),
],
),
),
);
}
}
It would be best if you gave height to the column you are using singlechildeScrollview.
Wrap column widget in container or sizedbox widget and give it height.
column widget has children widget GridView.builder that is wrapped in expanded so gridview.builder will try to take all available height in the column which will be infinite because it's not defined and you will get column covering screen taking infinite screen height in short blank screen.
In flutter, Column will take height as much as it can, SingleChildScrollView child dont have height (infinite). Combine together, Flutter don't know how to render them correctly and causing error.
To solve it, try to determine the height of Column by widgget like SizedBox or determine the mainSize.min.
Another way to solve it is wrap Column by IntrinsicHeight but not recommend cause it heavy.
If it takes too much height. so give height to the column.
like this..
SingleChildScrollView(
child: SizedBox(
height: 500,
child: Column(
children: const [...],
),
),
)
your expanded widget is taking whole space of column try removing it or replacing it with Sizedbox.
What widgets should be used to display 3 cartoons at the bottom of this picture and the text at the center responsively for different screen sizes?
Row with spaceEvenly
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//your images
],
);
https://flutteragency.com/how-to-set-space-between-elements-in-flutter/
There are many ways to do this. It will also depend on what responsive behavior you are looking for. I hope, I understood your specific requirements.
Here is a solution:
class Page extends StatelessWidget {
const Page({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
child: Stack(children: [
Center(
child: FractionallySizedBox(
widthFactor: .4,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
'Headline text',
style: GoogleFonts.chewy(
textStyle: const TextStyle(
color: Colors.white,
letterSpacing: .5,
),
),
),
),
),
),
Container(
alignment: const Alignment(0, .75),
child: FractionallySizedBox(
widthFactor: .8,
heightFactor: .3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/images/img1.png"),
Image.asset("assets/images/img2.png"),
Image.asset("assets/images/img3.png"),
],
),
),
)
]),
),
),
);
}
}
In this solution,
I use a main Container that will have your image as background.
I then use a Stack to position the headline and the images.
The headline is Centered and defined as a FittedBox inside a FractionallySizedBox. This allows me to have responsivity for the headline too.
Finally, for the list of images, I used a FractionallySizedBox to size the list and an aligned Container to position it within the stack. The images are then spread thanks to the use of MainAxisAlignment.spaceBetween.
So, as you see, I used the following widgets to responsively size and position my Widgets:
Position
Center
Container with the alignment property
Size
FractionallySizedBox
In my Flutter app, I have a ListView:
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
Container(
color: Colors.yellow,
height: 100
),
const SizedBox(height: 10),
// How to make this container fill up the remaining height?
Container(
color: Colors.black,
),
],
),
),
),
);
This produces the following view:
Question: How can I make the second box (with black background color) fill up the remaining space? If the content of the box exceeds the remaining space, the ScrollView will enable scrolling.
Is this possible?
There is a better option here using SliverFillRemaining in combination with CustomScrollView instead of a ListView
in your case the code will look like this.
Container(
color: Colors.blueAccent,
child: CustomScrollView(
shrinkWrap: true, // or false
slivers: <Widget>[
SliverToBoxAdapter(
child:Container(
color: Colors.yellow,
height: 100
),),
SliverToBoxAdapter(
child: SizedBox(height: 10),),
// use SliverFillRemaining to make this container fill up the remaining height?
SliverFillRemaining(
hasScrollBody: false, // if using a column, so the widgets in it, doesn't scroll
child:Container( //this container will fill the remaining space in the ViewPort
color: Colors.black,
),
) ,
],
),
),
Fill the remaining space of a ListView means filling the infinite height. I will prefer using Stack as body in this case, hope you can simply archive this.
How can we do without stack?
In this case, we can get the height and use it on Column and using Expanded on inner child that will fill the remaining spaces even for dynamic height.
I prefer using LayoutBuilder to get height.
body: LayoutBuilder(builder: (context, constraints) {
return SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
SizedBox(
// 1st child of listView
height: constraints.maxHeight,
child: Column(
children: [
Container(color: Colors.yellow, height: 100),
const SizedBox(height: 10),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
)
],
),
),
);
}),
You can get size and then set a proportion for each...
And set NeverScrollableScrollPhysics() to ensure no slight scrolling, as per below this appears to get what you are seeking.
Widget build(BuildContext context) {
Size _size = MediaQuery.of(context).size;
return Container(
child: Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(color: Colors.yellow, height: _size.height * 0.20),
SizedBox(height: _size.height * 0.10), // How to make this container fill up the remaining height?
Container(
height: _size.height * 0.70,
color: Colors.black,
),
],
),
),
),
));
}
}
Try below code hope its helpful to you. use MediaQuery here. add MediaQuery height to your black container
Refer blog also here for relative to screen size
Container(
color: Colors.blueAccent,
child: ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
Container(
color: Colors.yellow,
height: 100,
),
const SizedBox(height: 10),
// How to make this container fill up the remaining height?
Container(
color: Colors.black,
height: MediaQuery.of(context).size.height,
),
],
),
),
Your result screen->
I am using a stack widget to display animations inside a screen. I am using only 70% of the screen and the rest I have kept it unused. I want to display something else there. When I am wrapping my stack widget inside a column it is giving the error: Bottom Overflowed by Infinite Pixels.
I tried adding a custom height using Container and SizedBox. Also tried using SingleChildScrollView. Still the same error.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: Column(
children: [
Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.72,
child: FlareActor(
'assets/videos/stars.flr',
alignment: Alignment.center,
fit: BoxFit.cover,
animation: 'Blink',
controller: _controller,
),
),
Container(
child: Transform.scale(
scale: 0.6,
child: FlareActor(
'assets/videos/talking-earth.flr',
alignment: Alignment.center,
fit: BoxFit.cover,
animation: 'activated',
controller: _controller,
),
),
),
Positioned(
left: MediaQuery.of(context).size.width / 3.8,
top: MediaQuery.of(context).size.width / 10,
child: Text(
"Published",
style: GoogleFonts.ptSansNarrow(
color: whiteColor,
fontSize: ScreenUtil().setSp(50),
fontWeight: FontWeight.bold),
),
),
],
),
Text("Test"),
],
),
);
}
}
You need to wrap your stack with a Container first, setting a predefined height. This is because the Stack size relies on its parent.
Here's the official documentation on Stack: https://api.flutter.dev/flutter/widgets/Stack-class.html