How to use column inside single child scroll view flutter

How to use column inside single child scroll view flutter - android

I have a column inside a single child scroll view. I need to make my login screen scroll when I type using the keyboard because the keyboard hides the password text field.
class UserRegistration extends StatefulWidget {
#override
_UserRegistrationState createState() => _UserRegistrationState();
}
class _UserRegistrationState extends State<UserRegistration> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(0xFF6C62FF)
));
return SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF6C62FF),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Column([![enter image description here][1]][1]
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(child: FittedBox(child: Text('Welcome', style: TextStyle(fontFamily: 'SourceSans', fontSize: 50, fontWeight: FontWeight.w600, color: Color(0xFFFFD700)),))),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Register', style: TextStyle(fontFamily: 'SourceSans', fontSize: 40, fontWeight: FontWeight.w600, color: Colors.white)),
SizedBox(height: 5,),
Text('Start from today', style: TextStyle(fontFamily: 'SourceSans', fontSize: 25, letterSpacing: 1.5,fontWeight: FontWeight.w600, color: Colors.white), overflow: TextOverflow.ellipsis,),
],
),
),
Form(
child: Column(
children: [
EditTextNormal(hintText: 'Email', iconData: Icons.email, textInputType: TextInputType.emailAddress, validate: false, errorText: 'Enter your email',),
SizedBox(height: 20,),
EditTextObscure(hintText: 'Password', iconData: Icons.lock, textInputType: TextInputType.text, validate: false, errorText: 'Enter your password',),
SizedBox(height: 50,),
Container(
height: 50,
width: 180,
child: FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
onPressed: () {},
color: Colors.white,
child: Text('Register', style: TextStyle(color: Color(0xFF6C62FF), fontSize: 20), overflow: TextOverflow.ellipsis,),
),
)
],
),
),
Center(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Login', style: TextStyle(color: Color(0xFFFFD700), letterSpacing: 1, wordSpacing: 1.5))
],
text: 'Have an account? ',
style: TextStyle(fontSize: 18, fontFamily: 'SourceSans', fontWeight: FontWeight.bold, letterSpacing: 1, wordSpacing: 1.5)
),
),
),
],
),
),
),
),
);
}
}
This is my code but here when I use a column inside a single child scroll view space evenly does not work. Please give me a solution.
My output:
Expected Output:

Try This
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// CONTENT HERE
],
),
),
),
),
);
}

Add Container inside SingleChildScrollView and assign it height based on your keyboard open or not.
Add Dependency:
dependencies:
keyboard_visibility: ^0.5.6
Initialize keyboard listener in initState() for callback
bool _isKeyBoardShown = false;
#protected
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
setState(() {
_isKeyBoardShown = visible;
});
},
);
}
Based on _isKeyBoardShown value decide whether to add additional height on the screen or not.
Container(
width: MediaQuery.of(context).size.width,
height: _isKeyBoardShown
? MediaQuery.of(context).size.height +
MediaQuery.of(context).size.height / 2
: MediaQuery.of(context).size.height,
child: Column(....)
)
Note: Use MediaQuery to decide additional height don't use hard-coded values
here I used MediaQuery.of(context).size.height / 2

Related

Can we group or filter data inside our hive boxes

I use hive to store my data locally in expense tracker app. I have saved all expenses in a box called expenseBox. I have given each expense item a date and I want items with the same date to be grouped together and displayed separately. Is there a way to achieve this?
Thanks for your help!
BTW this is the code for my homescreen where I display the items.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:flutter_locales/flutter_locales.dart';
import '/models/expense.dart';
import '/widgets/expense_list_tile.dart';
import '/screens/add_expense_screen.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
static const routeName = '/home_page';
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum SlidableAction {
edit,
delete,
}
class _HomeScreenState extends State<HomeScreen> {
late Box expenseBox;
late Box pocketBox;
bool isFabVisible = true;
#override
void initState() {
expenseBox = Hive.box<Expense>('expenses');
pocketBox = Hive.box<int>('pocket');
super.initState();
}
#override
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: Hive.box<int>('pocket').listenable(),
builder: (context, Box<int> pocketBox, child) => Scaffold(
appBar: AppBar(
title: const LocaleText('appName'),
elevation: 0,
centerTitle: true,
),
body: NestedScrollView(
headerSliverBuilder: (context, _) => [
SliverAppBar(
expandedHeight: MediaQuery.of(context).size.height * 0.15,
flexibleSpace: FlexibleSpaceBar(
background: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'appName',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('budget') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'income',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('totalIncome') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const LocaleText(
'expense',
style: TextStyle(
fontSize: 14, color: Colors.white),
),
Text(
'${pocketBox.get('totalExpense') ?? 0}',
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold),
),
],
),
],
),
),
Expanded(child: Container()),
],
),
),
),
),
],
body: ValueListenableBuilder(
valueListenable: Hive.box<Expense>('expenses').listenable(),
builder: (context, Box<Expense> expensesBox, child) {
return NotificationListener<UserScrollNotification>(
onNotification: (notification) {
if (notification.direction == ScrollDirection.forward) {
if (!isFabVisible) setState(() => isFabVisible = true);
} else if (notification.direction ==
ScrollDirection.reverse) {
if (isFabVisible) setState(() => isFabVisible = false);
}
return true;
},
child: Scrollbar(
thickness: 5,
interactive: true,
child: ListView.separated(
separatorBuilder: (context, index) {
return const SizedBox();
},
itemCount: expenseBox.length,
itemBuilder: (context, index) {
final expense = expenseBox.getAt(index);
return ExpenseListTile(index: index, expense: expense);
},
),
),
);
},
),
),
floatingActionButton: isFabVisible
? FloatingActionButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const AddExpenseScreen(
index: -1,
),
));
},
child: const Icon(Icons.add),
)
: null,
),
);
}
}

You can try this code.
import 'package:flutter/material.dart';
import 'package:sticky_grouped_list/sticky_grouped_list.dart';
class MyMissionList extends StatefulWidget {
#override
State<MyMissionList> createState() => _MyMissionListState();
}
class _MyMissionListState extends State<MyMissionList> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: Container(
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
// AppColors.blue,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Material(
color: AppColors.baseLightBlueColor,
elevation: 15,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(30)),
),
child: Column(
children: [
AppBar(
backgroundColor: AppColors.baseLightBlueColor,
elevation: 0.0,
actions: [
Container(
padding: EdgeInsets.only(right: 20),
child: Image.asset(
"assets/Vector-2.png",
height: 5,
width: 22,
color: Colors.white,
)),
],
),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 20),
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: AppColors.baseLightBlueColor,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hello User123,",
style:
TextStyle(color: AppColors.white, fontSize: 15),
),
SizedBox(height: 10),
Text(
AppStrings.totalAmount,
// "Montant total :",
style:
TextStyle(color: AppColors.white, fontSize: 11),
),
Text(
"592,30 €",
style:
TextStyle(color: AppColors.white, fontSize: 25),
),
],
),
)
],
),
),
)),
body: Column(
children: [
Padding(
padding: const EdgeInsets.only(left:15.0,right: 15,top: 15),
child: Text("My Mission",style: TextStyle(
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
),
Expanded(
child: StickyGroupedListView<Element, DateTime>(
elements: elements,
order: StickyGroupedListOrder.ASC,
groupBy: (Element element) =>
DateTime(element.date.year, element.date.month, element.date.day),
groupComparator: (DateTime value1, DateTime value2) =>
value2.compareTo(value1),
itemComparator: (Element element1, Element element2) =>
element1.date.compareTo(element2.date),
floatingHeader: false,
groupSeparatorBuilder: (Element element) => Container(
height: 50,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 220,
padding: EdgeInsets.only(left: 20,top: 20,bottom: 10),
child: Text(
'${element.heading}',
textAlign: TextAlign.start,
style: TextStyle(color: Color(0xff919AAA)),
),
),
],
),
),
itemBuilder: (_, Element element) {
return element.type
? GestureDetector(
onTap: () {
// Navigator.push(context, MaterialPageRoute(builder: (context)=> WaitingForValidation()));
},
child: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle +
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
elevation: 15.0,
shadowColor: Colors.blue[100],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20.0))),
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
// boxShadow: [BoxShadow(color: AppColors.grey, blurRadius: 20.0)],
borderRadius:
BorderRadius.circular(20.0),
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.blue.shade900,
],
)),
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
),
),
],
),
),
),
)
: Card(
elevation: 4,
margin: EdgeInsets.only(bottom: 15, right: 15, left: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 70,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: MediaQuery.of(context).size.width * 0.62,
height: 50,
padding: EdgeInsets.only(top: 10,left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
element.subTitle +
'${element.date.day}/${element.date.month}/'
'${element.date.year}',
style: TextStyle(
//color:AppColors.grey
color: Color(0xff919AAA),
fontSize: 12,
fontWeight: FontWeight.w300),
),
SizedBox(height: 2,),
Text(
element.hotelName,
style: TextStyle(
//color:AppColors.grey
color: Color(0xff243656),
fontSize: 15,
fontWeight: FontWeight.w300),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top:5.0,bottom: 5),
child: Container(
height: 30,
width: 95,
child: MaterialButton(
onPressed: () {},
child: Text(
element.buttonText,
style: TextStyle(
color: AppColors.green,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
),
)
],
),
),
);
},
),
),
],
),
);
}
}
class Element {
bool type;
DateTime date;
String hotelName;
String subTitle;
String heading;
String buttonText;
Element(this.date, this.type, this.hotelName, this.subTitle, this.heading,
this.buttonText);
}
List<Element> elements = <Element>[
Element(
DateTime(2020, 7, 22),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
"Terminate",
),
Element(
DateTime(2021, 10, 15),
false,
"Rendez-vous equipe prod",
"Jeudi",
"Terminate",
/**/
"Terminate",
),
Element(
DateTime(2021, 12, 12),
true,
"Visite entrepot Villabe ",
"Mercredi",
"To Plan",
"To Plan",
),
];

No Responsive for any screen size

I make two page and use the expanded widgte..but not responsive in small screen...
when use very small font in my app will ok...(im use auto size text but not ok)
please watch my code and help me for responsive app
also i use mediaquery but not ok
thank you
const BottomContainerHeight = 80.0;
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : super(key: key);
#override
_InputPageState createState() => _InputPageState();
}
enum Gender {
male,
female,
}
class _InputPageState extends State<InputPage> {
late Gender selectedGender = Gender.female;
int height = 180;
int weight = 70;
int age = 24;
#override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
Orientation orientation = MediaQuery.of(context).orientation;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text(
" bmiمحاسبه ",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp),
),
),
centerTitle: true,
elevation: 3.0,
shadowColor: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0))),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
child: SizedBox(
height: constraints.maxHeight * 0.5,
width: constraints.maxWidth * 0.5,
child: ReusableCard(
colour: selectedGender == Gender.female
? activeCardColoursFemale
: inactiveCardColoursFemale,
cardChild: IconContent(
height: constraints.maxHeight * 0.2,
width: constraints.maxWidth * 0.5,
svgPicture: 'assets/2.svg',
label: 'خانم',
),
onPress: () {
selectedGender = Gender.female;
},
),
),
),
Expanded(
child: SizedBox(
height: constraints.maxHeight * 0.9,
width: constraints.maxWidth * 0.5,
child: ReusableCard(
colour: selectedGender == Gender.male
? activeCardColoursMale
: inactiveCardColoursMale,
cardChild: IconContent(
height: constraints.maxHeight * 0.2,
width: constraints.maxWidth * 99,
svgPicture: 'assets/3.svg',
label: 'آقا',
),
onPress: () {
selectedGender = Gender.male;
},
),
),
),
],
)),
Expanded(
flex: 1,
child: ReusableCard(
onPress: () {},
colour: [Color(0xff5f72bd), Color(0xff9b23ea)],
//colour: Color(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
':میزان قد شما',
style: labelTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
'سانتیمتر',
style: labelTextStyle,
),
Text(
height.toString(),
style: numTextStyle,
)
],
),
SliderTheme(
data: SliderTheme.of(context).copyWith(
inactiveTrackColor: Colors.white,
activeTrackColor: Colors.amberAccent,
thumbColor: Colors.amber,
overlayColor: Color(0x1fFFF176),
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 15.0)
//shape ra bozorgtr mikonad...
,
overlayShape: RoundSliderOverlayShape(
overlayRadius: 30.0) //saye dor shape miandzad
),
child: Slider(
value: height.toDouble(),
min: 120.0,
max: 220.0,
onChanged: (double newValue) {
setState(() {
height = newValue.round();
});
},
),
),
],
),
),
),
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
child: ReusableCard(
onPress: () {},
colour: [Colors.teal, Colors.tealAccent],
//colour: Color(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'وزن',
style: labelTextStyle,
),
Text(
weight.toString(),
style: numTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
icon: FontAwesomeIcons.minus,
color: Colors.greenAccent,
onPressed: () {
setState(() {
weight--;
});
}),
SizedBox(
width: 10.0,
),
RoundIconButton(
icon: FontAwesomeIcons.plus,
color: Colors.greenAccent,
onPressed: () {
setState(() {
weight++;
});
}),
],
)
],
),
),
),
Expanded(
flex: 1,
child: ReusableCard(
onPress: () {},
colour: [Color(0xfff9d423), Color(0xfff83600)],
//colour: Color(0xFF65E655),
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'سن',
style: labelTextStyle,
),
Text(
age.toString(),
style: numTextStyle,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RoundIconButton(
icon: FontAwesomeIcons.minus,
color: Colors.orange,
onPressed: () {
setState(() {
age--;
});
}),
SizedBox(
width: 10.0,
),
RoundIconButton(
icon: FontAwesomeIcons.plus,
color: Colors.orange,
onPressed: () {
setState(() {
age++;
});
}),
],
)
],
),
),
),
],
)),
BottomBotton(
onTap: () {
CalculatorBrain calc =
CalculatorBrain(height: height, weight: weight);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ResultPage(
bmiResult: calc.calculateBmi(),
resultText: calc.getResult(),
feedBack: calc.getFeedBack(),
)));
},
bottonTitle: 'محاسبه',
),
],
),
);
}));
}
}
and please watch result page like my home screen page
thank you for help me
class ResultPage extends StatelessWidget {
ResultPage({required this.bmiResult,
required this.resultText,
required this.feedBack});
final String bmiResult;
final String resultText;
final String feedBack;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF3366FF),
const Color(0xFF00CCFF),
],
begin: const FractionalOffset(0.0, 0.0),
end: const FractionalOffset(1.0, 0.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp)),
),
title: Text(
' bmiمحاسبه ',
style: TextStyle(
fontFamily: 'assets/fonts/iraniansans', color: Colors.white),
),
),
body: SizedBox(
height: MediaQuery
.of(context)
.size
.height,
width: MediaQuery
.of(context)
.size
.width,
child: Column(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.bottomCenter,
child: Text(
'نتیجه تست شما',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 35.0,
fontWeight: FontWeight.bold,
color: Colors.red),
),
),
),
Expanded(
flex: 5,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
margin: EdgeInsets.all(13.0),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Color(0xfffff1eb), Color(0xfface0f9)],
),
borderRadius: BorderRadius.circular(10.0)),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/shakhes.png',
height: constraints.maxHeight * 0.5,
width: constraints.maxWidth * 99,
fit: BoxFit.fill,
),
SizedBox(
height: constraints.maxHeight * 0.4,
width: constraints.maxWidth * 0.9,
child: Column(
children: [Text(
resultText,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.green),
),
Text(
bmiResult,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 30.0,
color: Colors.red),
),
Text(
feedBack,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 20.0,
color: Colors.black),
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
maxLines: 3,
),
],
),
),
],))
);
},
),
),
Expanded(
flex: 1,
child: BottomBotton(
bottonTitle: 'محاسبه دوباره',
onTap: () {
Navigator.pop(context);
}),
)
],
),
));
}
}

See the problem in your code is not with width and height, but with font size because font size differs from screen to screen. I would strongly recommend you to use sizer package to create responsive flutter apps. What this plugin does is that it define the size into the percent of your screen. For instance:
Container(
height: 20.0.h, //20% of the screen height
width: 20.0.w, //20% of the screen width
)
As far as font goes, you can define the size of the fonts by using sp keyword. Like this:
Text(
"Aloysius",
style: TextStyle(
fontSize: 15.0.sp
)
)

You have to use #media query in fontSize of your texts too and it will be ok
Like this:
Text('نتیجه تست شما',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'assets/font/iraniansans',
fontSize: 35.0, // it is wrong
fontSize: MediaQuery.of(context).size.width/15, // true
fontWeight: FontWeight.bold,
color: Colors.red),
),
Also you need to use #media query in size of your pictures.

GridView.Count is not visible without fixing the height of parent container

I am new to flutter so I am unable to found the problem in this code. All things are working fine but I am trying to use Grid list with two rows which are working fine when I am giving height to the parent container of the list but I want to wrap the Height according to items.
void main() {
runApp(new MaterialApp(
home: new MyHome(),
));
}
class MyHome extends StatefulWidget {
#override
_AppState createState() => _AppState();
}
TextEditingController controller = new TextEditingController();
class _AppState extends State<MyHome> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size(null, 180),
child: CustomAppBar(_scaffoldKey, controller),
),
drawer: createDrawer(),
body: SingleChildScrollView(
child: Container(
color: Colors.black12,
//=========Main Container For Scrollview==============//
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Column(
children: <Widget>[
Container(
//================Container for Categories==================//
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
],
),
),
),
Card(
child: SizedBox(
height: 200.0,
child: Carousel(
images: [
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
],
dotSize: 4.0,
dotSpacing: 15.0,
indicatorBgPadding: 5.0,
borderRadius: false,
)),
),
//======================Here is the Problem===========//
GridView.count(
childAspectRatio: 4.0,
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
)
],
),
),
),
),
);
}
}

Since you're using SingleChildScrollView as a parent widget for your GridView, so you need to specify primary: false and shrinkWrap: true so GridView takes the least height based on the item counts.
Complete code:
void main() {
runApp(new MaterialApp(
home: new MyHome(),
));
}
class MyHome extends StatefulWidget {
#override
_AppState createState() => _AppState();
}
TextEditingController controller = new TextEditingController();
class _AppState extends State<MyHome> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size(null, 180),
child: CustomAppBar(_scaffoldKey, controller),
),
drawer: createDrawer(),
body: SingleChildScrollView(
child: Container(
color: Colors.black12,
//=========Main Container For Scrollview==============//
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Column(
children: <Widget>[
Container(
//================Container for Categories==================//
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
],
),
),
),
Card(
child: SizedBox(
height: 200.0,
child: Carousel(
images: [
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
],
dotSize: 4.0,
dotSpacing: 15.0,
indicatorBgPadding: 5.0,
borderRadius: false,
)),
),
GridView.count(
shrinkWrap: true,
primary: false,
childAspectRatio: 4.0,
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
)
],
),
),
),
),
);
}
}

How to center the Widget inside column contained inside Singlechild Scrollview?

I am designing a view for creating a group of users from firestore data. I want a view like whatsapp type create a group design. Below is my code :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
titleSpacing: 0.0,
centerTitle: true,
automaticallyImplyLeading: true,
leading: _isSearching ? const BackButton() : Container(),
title: _isSearching ? _buildSearchField() : Text("Create Group"),
actions: _buildActions(),
),
body: _buildGroupWidget(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
elevation: 5.0,
onPressed: () {
// create a group
createGroup();
},
child: Icon(
Icons.send,
color: Colors.white,
),
),
);
}
Widget _buildGroupWidget() {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
selectedUserList != null && selectedUserList.length > 0
? Container(
height: 90.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: selectedUserList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
selectedUserList.removeAt(index);
setState(() {});
},
child: Container(
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
child: Column(
children: <Widget>[
Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
// color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
color: Colors.primaries[
index % Colors.primaries.length],
),
),
Container(
height: 20.0,
width: 50.0,
child: Center(
child: Text(
selectedUserList[index].userName,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
)
: Container(),
Container(
alignment: Alignment.centerLeft,
height: 30,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.deepOrange,
boxShadow: [
BoxShadow(
color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Text(
"Contacts",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
userList != null && userList.length > 0
? ListView.builder(
shrinkWrap: true,
itemCount: userList.length,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
if (selectedUserList.contains(userList[index])) {
selectedUserList.remove(userList[index]);
} else {
selectedUserList.add(userList[index]);
}
setState(() {});
},
title: Text(userList[index].userName),
subtitle: Text(userList[index].userContact),
leading: CircleAvatar(
backgroundColor: Colors.primaries[index],
),
);
},
)
: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)))
],
),
);
}
The problem with my code is i want to center my last widget which is center widget which will be seen when there is no data. I want to set it to the center of the screen.
But, it not get to the center of the screen.
I have already tried with Expanded, Flex and other solutions from other resource references. But, it doesn't work for me.
Can anyone suggest me how to center my last widget ?

I think expanded should work wrapping your last widget.
Still, if it doesn't work for you then i you can remove the height of your other 2 widgets from full screen as your both widgets have static height which is 120 total here.
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height - 120,
child: Center(
child: Text("Data Unavailable!!",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.blueGrey)),
))
This will solve your issue for your case.

Flutter :- Inside the PageView Image is not setting to fit the screen on width?

I am using the PageView for the view-pager functionality and showing the image on each page with contains some text and button on each page.
As I am using the Stack widget for putting the view on one another like Relative-layout in Android, But My Image on the First Page of the PageView is not set to fit on the screen
I have tried the below solution like below
1).First link
2). Second Link
But not getting the proper solution, I have tried the below lines of code for it,
class MyTutorialScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Material(
child: PageIndicatorContainer(
pageView: PageView(
children: <Widget>[
Stack(
//////ON THIS SECTION I AM GETTIG PROBLEM
children: <Widget>[
Container(
/////// NEED THE SOLUTION ON THIS SECTION
color: Colors.yellow,
child: Image.asset('images/walkthrough_1.png',
fit: BoxFit.fitWidth),
),
Positioned(
top: 40.0,
right: 40.0,
child: InkWell(
onTap: () {
print("HERE IS I AM");
},
child: Text(
"SKIP",
style: TextStyle(color: Colors.white),
),
)),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
],
),
)
],
),
Container(
color: Colors.yellow,
child: Image.asset('images/walkthrough_2.png', fit: BoxFit.cover),
),
Container(
color: Colors.blueAccent,
child: Image.asset('images/walkthrough_3.png', fit: BoxFit.cover),
)
],
),
length: 3,
align: IndicatorAlign.bottom,
indicatorSpace: 5.0,
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.purpleAccent,
padding: EdgeInsets.all(10.0),
),
);
}
}
And please check the screen which I am getting from the above code
Above the screen, how would I remove the white color on the right side?
I am using this library for the indicator
page_indicator: ^0.2.1

Please use below line to show image as per device width and height..Try below lines of code and let me know in case of concern
Container(
height: double.maxFinite, //// USE THIS FOR THE MATCH WIDTH AND HEIGHT
width: double.maxFinite,
child:
Image.asset('images/walkthrough_3.png', fit: BoxFit.fill),
)

I have implemented the ViewPager (PageView) functionality , by below lines of code, I am posting the answer for the other which can be helpful for the future user.
I have used this library for the indicator like below
page_indicator: ^0.2.1
Please check the below lines of code for it
import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';
class MyTutorialScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Material(
child: PageIndicatorContainer(
pageView: PageView(
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('images/walkthrough_1.png', fit: BoxFit.fill),
),
Positioned(
top: 40.0,
right: 40.0,
child: InkWell(
onTap: () {
print("HERE IS I AM");
},
child: Text(
"SKIP",
style: TextStyle(color: Colors.white),
),
)),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
],
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('images/walkthrough_2.png', fit: BoxFit.fill),
),
Positioned(
top: 40.0,
right: 40.0,
child: InkWell(
onTap: () {
print("HERE IS I AM");
},
child: Text(
"SKIP",
style: TextStyle(color: Colors.white),
),
)),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
],
),
)
],
),
Stack(
children: <Widget>[
Container(
height: double.maxFinite,
width: double.maxFinite,
child:
Image.asset('images/walkthrough_3.png', fit: BoxFit.fill),
),
Positioned(
bottom: 48.0,
left: 10.0,
right: 10.0,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"To The Ravindra Kushwaha App. \n One tap Club Destination !",
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center),
),
Container(
padding: const EdgeInsets.all(16.0),
child: RaisedButton(
child: Text("Let's GO!!"),
onPressed: () {},
),
),
],
),
)
],
)
],
),
length: 3,
align: IndicatorAlign.bottom,
indicatorSpace: 5.0,
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.purpleAccent,
padding: EdgeInsets.all(10.0),
),
);
}
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to use column inside single child scroll view flutter - android

Related

Can we group or filter data inside our hive boxes

No Responsive for any screen size

GridView.Count is not visible without fixing the height of parent container

How to center the Widget inside column contained inside Singlechild Scrollview?

Flutter :- Inside the PageView Image is not setting to fit the screen on width?

Categories

Resources