so today i did good with advancing in learning to make an app with flutter , i made a ListView , but the image didnt take the full height and with of the parent element , i tried some solutions but it didnt workout
this is the class
class FlowersItem extends StatelessWidget {
final String imgAssetPath;
FlowersItem({this.imgAssetPath});
#override
Widget build(BuildContext context) {
return Container(
width: 200,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 30),
margin: EdgeInsets.only(right: 16),
decoration: BoxDecoration(
color: Color(0xff29404E),
borderRadius: BorderRadius.circular(12)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(children: <Widget>[
ClipRect(
child: FittedBox(
child: Image.asset(imgAssetPath),
fit: BoxFit.fill,
),
)
],)
],
),
);
}
}
List<FlowersItem> flowers = [
FlowersItem(
imgAssetPath: 'assets/images/flower1.jpeg',
),
FlowersItem(
imgAssetPath: 'assets/images/flower-pot.png',
),
FlowersItem(
imgAssetPath: 'assets/images/flower-pot.png',
),
FlowersItem(
imgAssetPath: 'assets/images/flower-pot.png',
),
FlowersItem(
imgAssetPath: 'assets/images/flower-pot.png',
),
];
Have you tried BoxFit.cover? I think that's what you are looking for.
It generally works for me when I want to fill out and entire box with an image.
have you tried Expanded class?
So, Expanded class is A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
you could find the documentation here.
Related
In the screen, I have a Column, it has a cusotm made widget of specific height. Then, I have Expanded, in which I have a TabBar which has three tabs.
In one of those tabs, I want to show a list. First, I have a padding, which contains column. The column has some text, which should remain at top and the list should be shown in the space which is remaining. I am using Expanded for that, but it is not working.
I can't use ListView directly, and also can't use expanded. It is only working when I am giving it a container of fix size. Now, in different screens, it will look different. So, I want to take all of the remaining space and build the list there. Code for reference -
Here is the doubts screen, which is one of the tabs of main screen -
import 'package:flutter/material.dart';
import 'package:my_board_plus/size_config.dart';
import 'package:my_board_plus/styles.dart';
import '../../api_handling/api_fetch/fetch_doubt_questions.dart';
import '../../data_models/doubt_question_model.dart';
class NewDoubtsScreen extends StatefulWidget {
const NewDoubtsScreen({Key? key}) : super(key: key);
#override
State<NewDoubtsScreen> createState() => _NewDoubtsScreenState();
}
class _NewDoubtsScreenState extends State<NewDoubtsScreen> {
late Future<List<DoubtQuestionModel>> doubtQuestionsList;
#override
void initState() {
doubtQuestionsList = fetchDoubtQuestion();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backgroundColor2,
floatingActionButton: Container(
width: getProportionateScreenWidth(130),
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
color: brandPurple,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Text(
'? My Doubts',
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
),
),
body: Padding(
padding: EdgeInsets.only(top: 8.0, left: 5),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Trending Doubts',
style: TextStyle(
color: Colors.white,
),
),
Text(
'View all',
style: TextStyle(
color: brandYellow,
decoration: TextDecoration.underline
),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
height: getProportionateScreenHeight(530),
width: double.infinity,
color: Colors.red,
),
),
],
),
),
);
}
}
The red area that you are seeing is the one. I want it to occupy whole area available in the phone screen, so I can show list in it which should be scrollable. In this case, it is occupying all, but in different screens, it might not. So, please give me some suggestions.
You can try to give the height of the container like
height: double.infinity
Or you can give the height of it with substracting the other height from the screen size like
height: MediaQuery.of(context).size.height - getProportionateScreenHeight(50) //the heigth size that you give the other widget that top of it
try to wrap your Padding widget with the Expanded widget,
Expanded widget in column will take the rest of the space of the screen.
also no need to give height to Container widget, so you can remove getProportionateScreenHeight(530) this one
I'm still new to Flutter Web. I have 3 lines in my flutter web, the first line is the welcome message, the second line is a product and the last is contact, to see those lines user needs to do a scroll on my web. But how can I wrap my code using the Scroll function in flutter web? this is my code.
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Column(
children: [
Container(
// Code Line 1
height: size.height,
width: size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/container.jpg"),
fit: BoxFit.fitWidth),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CusAppBar(),
Spacer(),
Body(),
Spacer(
flex: 1,
),
],
),
),
Container(
// Code Line 2 Here
),
Container(
// Code Line 3 Here
)
],
),
);
}
}
My background is react, usually we just use tag ScrollView outside the container so the user can scroll the page. But how I can implement it on flutter web?
Thank you.
Try to add your fist Column inside SingleChildScrollView like below hope it help you:
body: SingleChildScrollView(
child:Column(
children:[
//Declare Your Widgets Here
],
),
),
I am trying to build a custom bottomNavBar and my code looks like this:
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(scaleWidth(20)),
topRight: Radius.circular(scaleWidth(20)),
),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.1),
blurRadius: 20,
),
],
),
height: scaleWidth(59),
child: Row(
children: _buildBottomNavBarItems(context),
),
),
Container(
color: AppColors.white,
height: MediaQuery.of(context).padding.bottom,
)
],
);
}
I am calling this inside a Scaffold like this:
bottomSheet: BottomNavBar(),
But the problem is that bottomNavBar is covering the whole screen! Without the Column it is working fine, but the Column is crucial so I can have the bottom Container with height: MediaQuery.of(context).padding.bottom, so the height of the navBar is changing dynamically depending on the SafeArea of the device. (Example: iPhone SE has no bottomSafeArea but the iPhone X has one, so the height needs to be adjusted.)
What am I missing here and how can I solve this?
If you need any more info just let me know!
You have to add mainAxisSize: MainAxisSize.min to the Column. Also, you don't need mainAxisAlignment: MainAxisAlignment.end, the bottom sheet is automatically aligned to the end.
Also, if you want Scaffold.body to take bottom widget's space into consideration, swap bottomSheet with bottomNavigationBar.
class Sheet extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
//...
],
);
}
}
https://www.dartpad.dev/374026cc206115bedf79925bb75720af?null_safety=true
Try using bottomNavigationBar: instead of bottomSheet: or in the body use Stack: and add the position of your bottomNavBar bottom:0
I need to fix a minimum width to my Column Widgets. Inside each of them, I have Text Widgets which can be very short or very long. I need to fix a minimum width to them in order to have an acceptable size of Column even if the text is short. The other Column need obviously to adapt himself.
Row(children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child: RichText(
text: TextSpan(
text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
],
),
],
)
There's probably a dozen ways to do what you want. And likely none of them straightforward or easy to understand. (The subject of constraints & sizes is quite complicated. See this constraints page for more examples & explanations.)
Here's one potential solution.
This will set a minimum width for the blue column (based on stepWidth), but will expand/grow if the text (child) inside wants to.
The yellow column will resize to accommodate the blue column.
class ExpandedRowPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Row Page'),
),
body: SafeArea(
child: Center(
child: Row(
children: [
IntrinsicWidth(
stepWidth: 100,
// BLUE Column
child: Container(
color: Colors.lightBlueAccent,
child: Column(
children: [
//Text('Short'),
Text('shrt')
],
)
),
),
// YELLOW Column
Flexible(
child: Container(
alignment: Alignment.center,
color: Colors.yellow,
child: Column(
children: [
Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
],
)
),
)
],
)
),
),
);
}
}
You could do the above without a Flexible yellow column, but a very long text child would cause an Overflow warning without a Flexible or Expanded wrapping widget.
A Row widget by itself has an infinite width constraint. So if a child wants to be bigger than screen width, it can, and will cause an overflow. (Try removing Flexible above and rebuild to see.)
Flexible and Expanded, used only inside Row & Column (or Flex, their superclass), checks screen width and other widgets inside a Row, and provides its children with a defined constraint size instead of infinite. Children (inside Flexible/Expanded) can now look up to parent for a constraint and size themselves accordingly.
A Text widget for example, will wrap its text when it's too wide for constraints given by Flexible/Expanded.
use FittedBox();
suppose Example:
Row(
children: [
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 80), // do not work
child: Text("short text"),
),
],
),
Column(
children: [
Container(
constraints: BoxConstraints(minWidth: 110), // do not work
child:
FittedBox(
child: RichText(
text: TextSpan(
text:
"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
),
),
],
),
],
);
I have the following dial located at the center of my screen.
I have called three different part to construct this dial.
However it seems to be stuck in the center of my screen and I want to shift it to the top center portion. Ive tried changing the alignments but it doesn't seem to work.
This is my code:
This is the dependency I'm using: https://pub.dev/packages/flutter_neumorphic
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
pedometerOuterDial(context),
pedometerInnerDial(context),
Center(child: stepText()),
],
);
}
Widget stepText() {
return Text(
'4800\nSteps',
style: khomeStyle.copyWith(color: kOrange),
);
}
Widget pedometerOuterDial(context) {
final percentage = 30.0;
return Padding(
padding: const EdgeInsets.all(80.0),
child: Align(
alignment: Alignment.topCenter,
child: Neumorphic(
boxShape: NeumorphicBoxShape.circle(),
padding: EdgeInsets.all(10),
style: NeumorphicStyle(
depth: NeumorphicTheme.embossDepth(context),
),
child: CustomPaint(
painter: NeuProgressPainter(
circleWidth: 20,
completedPercentage: percentage,
defaultCircleColor: Colors.transparent,
),
child: Center(),
),
),
),
);
}
Widget pedometerInnerDial(context) {
return Align(
child: Neumorphic(
boxShape: NeumorphicBoxShape.circle(),
padding: EdgeInsets.all(80),
style: NeumorphicStyle(
color: Colors.white,
depth: NeumorphicTheme.depth(context),
),
),
);
}
Also I haven't used Media Query here for any of the dials, so will that be an issue for displaying on other devices?
Since you are using a stack widget, the best way to do this is to use a positioned widget. You can place the widget on top by wrapping it with Positioned and setting the top property to 0.
Here is an example:
Positioned(
top:0,
child:YourWidget(),
),
Alignment won't work for the stack widget because it only aligns the items when there are extra space around it. Example: It works in a Column or Row since they occupy space and allow the widgets inside it to be placed and move around the occupied space.