Dart Flutter overflowing words to bottom line - android

I'm building a language application. The application is as follows:
There is "How's your day going?" he is writing. But there is an overflow problem because it does not fit.
I want it to automatically go to the bottom line if it overflows. How can I do that?
Codes:
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:getwidget/getwidget.dart';
class selamlasmaLearn_2 extends StatefulWidget {
#override
State<selamlasmaLearn_2> createState() => _selamlasmaLearn_1State();
}
class _selamlasmaLearn_1State extends State<selamlasmaLearn_2> {
final CarouselController _controller = CarouselController();
List<wordAndMeaning> wordsList = [
wordAndMeaning("How's it going?", "Nasıl gidiyor?", false),
wordAndMeaning("How's your day?", "Günün nasıldı?", false),
wordAndMeaning("How's your day going?", "Günün nasıl gidiyor?", false),
wordAndMeaning("Nice to see you", "Seni görmek güzel", false),
wordAndMeaning("It's been a while", "Görüşmeyeli uzun zaman oluyor", false),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.amber[500],
bottomOpacity: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
),
title: Text("Selamlama", style: TextStyle(fontSize: 25),),
),
backgroundColor: Colors.amber,
body: Builder(builder: (context) {
final double height = MediaQuery.of(context).size.height - 160;
return Column(
children: [
Expanded(
child: CarouselSlider(
carouselController: _controller,
options: CarouselOptions(
height: height,
viewportFraction: 1.0,
enlargeCenterPage: false,
),
items: wordsList.map((wordAndMeaning word) {
return Expanded(
child: Builder(
builder: (BuildContext context) {
return Container(
width: 45, // <<<<<<<<<<<<<<<<!!!!!!!
decoration: BoxDecoration(color: Colors.amber),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
if (word.showMeaning) ...[
Text(word.meaning,
style: TextStyle(
fontSize: MediaQuery.of(context).size.width - 200, color: Colors.white)),
Text(word.word,
style:
TextStyle(fontSize: 20, color: Colors.white)),
],
if (!word.showMeaning) ...[
Text(word.word,
style: TextStyle(
fontSize: 45, color: Colors.white)),
],
],
),
const SizedBox(
width: 10,
),
IconButton(
icon: Icon(Icons.remove_red_eye_sharp),
color: Colors.white,
iconSize: 25,
onPressed: () {
setState(() {
word.showMeaning = !word.showMeaning;
});
},
),
],
),
);
},
),
);
}).toList(),
),
),
Container(
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
color: Colors.amber[300],
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(10),
),
width: 130,
height: 60,
child: Container(
child: GFButton(
icon: Icon(Icons.arrow_back_ios),
text: "Geri", textStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 24),
// borderi kapatma:
onPressed: () => _controller.previousPage(
duration: const Duration(milliseconds: 100),
curve: Curves.easeInCirc,
),
size: GFSize.LARGE,
),
),
),
SizedBox(
width: 10,
),
SizedBox(
width: 10,
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(10),
),
width: 130,
height: 60,
child: Container(
child: GFButton(
icon: Icon(Icons.arrow_forward_ios),
text: "İleri", textStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 24),
onPressed: () => _controller.nextPage(
duration: const Duration(milliseconds: 100),
curve: Curves.easeInCirc,
),
size: GFSize.LARGE,
),
),
),
],
),
],
),
)
],
);
}),
);
}
}
class wordAndMeaning {
String word;
String meaning;
bool showMeaning;
wordAndMeaning(this.word, this.meaning, this.showMeaning);
}
The size of the text is determined in line 54. I've also commented out the code that determines the size.
Thanks in advance for the help.


You can use Flexible or Expanded widgets.
Expanded(
child: Text("How's it going?"),
)
OR
Flexible(
child: Text("How's it going?"),
)
Both approaches have their own advantages, But a Flexible widget is preferable as it renders the widget as per Text can occupy.


Add your Text widget insede Expanded or Flexible Widget
Row(
children: [
Expanded(
child: Text(
'Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!',
),
),
],
),
Result Screen->
Try to add your Inside Row widgets wrap it with Expanded or Flexible refer my answer here or here or here or here or here hope its helpful to you

Related

Alert Dialog widget is causing A RenderFlex overflowed by 92 pixels on the bottom

Would appreciate it if anyone can help me out with the problem I am having while developing the flutter app, Since I am relatively new to flutter, I am using the Expanded(parent) widget under which I am using multiple widgets, & Click on of the widget I am showing alert dialog which has text input, but when someone focuses on the text input I am getting this error. I am wrapping my alert dialog widget under the SingleChildScrollView widget but still getting the error.
///--------Parent WIdget Code------------------------Expanded(
// flex: 1,
// child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(0),
// height: 100,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
SingleChildScrollView(
child: FutureBuilder(
future: getData(),
builder: (context, snapshot) {
return snapshot.hasData
? Column(
children: [
Container(
padding:
const EdgeInsets.fromLTRB(10, 70, 0, 10),
child: const Text("Select Shuttle ID",
style:
TextStyle(fontWeight: FontWeight.bold)),
),
Container(
padding:
const EdgeInsets.fromLTRB(20, 0, 0, 10),
child: DropdownButton<String>(
hint: const Text("Select Shuttle ID"),
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(
color: Colors.deepPurple),
underline: Container(
height: 2,
width: 50,
color: Colors.deepPurpleAccent,
),
onChanged: (String? value) {
setState(() {
dropdownValue = value!;
print(
'Selected One: $dropdownValue');
filterData(dropdownValue);
// print(list);
});
},
items: getListData()))
],
)
: const Center(
child: CircularProgressIndicator(
strokeWidth: 3,
),
);
},
)),
Row(
children: [
Container(
// height: 10,
padding: const EdgeInsets.fromLTRB(70, 50, 10, 0),
child: Wrap(children: [
InkWell(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
height: 50,
child: Image.asset(
'assets/images/home-page.png'),
),
const SizedBox(
height: 10,
),
const Text(
'Home',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
onTap: () {
GetHome(context);
},
),
])),
Container(
padding: const EdgeInsets.fromLTRB(30, 70, 10, 10),
child: Column(
children: [
Container(
child: BatteryIndicator(
batteryFromPhone: false,
batteryLevel: batteryLevel,
style: BatteryIndicatorStyle.values[0],
colorful: true,
showPercentNum: true,
mainColor: Colors.blue,
size: 25.0,
ratio: 4.0,
showPercentSlide: true,
),
),
const SizedBox(
height: 25,
),
const Text(
'Battery',
style: TextStyle(fontWeight: FontWeight.bold),
)
],
))
],
),
Row(
children: [
Container(
height: 10,
)
],
),
Row(
children: [
Container(
// height: 10,
padding: const EdgeInsets.fromLTRB(40, 50, 10, 0),
child: Wrap(children: [
InkWell(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
height: 50,
child: Image.asset(
'assets/images/inventory.png'),
),
const SizedBox(
height: 10,
),
const Text(
'Inventory Check',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
)
],
),
onTap: () {
GetInventory(context);
},
),
])),
Container(
// height: 10,
padding: const EdgeInsets.fromLTRB(10, 50, 10, 0),
child: Wrap(children: [
InkWell(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
height: 50,
child:
Image.asset('assets/images/distance.png'),
),
const SizedBox(
height: 10,
),
const Text(
'Pallet Distance',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
onTap: () {
EnterPalletDistance(context);
},
),
]))
],
),
Row(
children: [
Container(
height: 20,
)
],
),
Row(
children: [
Container(
// height: 100,
padding: const EdgeInsets.fromLTRB(90, 50, 10, 0),
child: Wrap(children: [
Material(
elevation: 20,
child: ElevatedButton(
child: Text('STOP'),
style: ElevatedButton.styleFrom(
primary: Colors.red,
padding: const EdgeInsets.symmetric(
horizontal: 50, vertical: 20),
textStyle: const TextStyle(
fontSize: 15, fontWeight: FontWeight.bold)),
onPressed: () {
Stop(context);
},
),
),
]),
)
],
),
],
),
],
)),
// )
);
///-------------------- Alert Dialog Code--------------------
EnterPalletDistance(context) {
final isSelected = CheckIfShuttleSelected(context);
// print(isSelected);
if (isSelected) {
// print("CONTEXT IS: $context");
TextEditingController palletDistanceController = TextEditingController();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
// alignment: Alignment.topCenter,
// scrollable: true,
title: const Text('Enter Pallet Distance'),
content: SingleChildScrollView(
child:
// Column(
// children: <Widget>[
// child:
Container(
// height: 100,
// padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: TextField(
onChanged: (value) {
// print(value);
},
controller: palletDistanceController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter Distance',
),
),
// ),
// ],
),
),
actions: <Widget>[
TextButton(
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.red,
textStyle: const TextStyle(color: Colors.white)),
child: const Text('CANCEL'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: const Text('Submit'),
onPressed: () {
Navigator.pop(context);
},
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.green),
),
],
);
})

One possible Solution.
Give Scaffold this property
resizeToAvoidBottomInset: false,

Using carousel slider with page view

I am using carousal slider with page view but when I am sliding the images in scroll view it is sliding to me to next page instead of next image. I just want to slide images when I slide on image and i want to slide to the next page when i slide below the image. but now wherever i slide on the screen it take me to the next page.
This is my page view.
import 'package:bartermade/controllers/profileController.dart';
import 'package:bartermade/models/tradeModel.dart';
import 'package:bartermade/widgets/profileView.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../screens/home/bottomBarViews/homeView/categoriesDetailScreen.dart';
class PageViewHolder extends StatelessWidget {
final PageController pageController = PageController(
initialPage: 0,
);
ProfileController _profileController = Get.find();
final String reciverId;
final String currentUserId;
final TradeModel catData;
PageViewHolder(
{required this.reciverId,
required this.currentUserId,
required this.catData});
var followersList = ['Ali', 'Hussain', 'Hassan', 'Akhtar'];
#override
Widget build(BuildContext context) {
// print("cat ID " + "${catData.user.id}");
// print("profile ID " + "${_profileController.profileId}");
return Scaffold(
body: PageView(
// physics: catData.user.id != _profileController.profileId.value
// ? AlwaysScrollableScrollPhysics()
// : NeverScrollableScrollPhysics(),
physics: ClampingScrollPhysics(),
pageSnapping: false,
onPageChanged: (index) {
},
controller: pageController,
children: [
//first screen in page view
TradeDetailScreen(
catData: catData,
currentUserId: currentUserId,
reciverId: reciverId,
),
//second screen here
ProfileView(
firstName: catData.user.firstName,
lastName: catData.user.lastName,
followers: followersList,
profileUrl: catData.user.profilePictureUrl,
screenState: true,
),
],
),
);
}
}
And this is my screen page
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) => SafeArea(
child: SingleChildScrollView(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
Get.back();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
)),
Container(
clipBehavior: Clip.antiAlias,
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: '${widget.profileUrl}',
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
SizedBox(
width: 7,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"${widget.lastName ?? " " "${widget.firstName ?? " "}"}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
2),
),
widget.catData["user"] ==
profileController.userId.value
? Container(
height: 0,
width: 0,
)
: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Follow',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20)))),
],
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'4.3',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
1.8),
),
Icon(
Icons.star,
size: 15,
color: Colors.yellow,
),
],
),
],
),
)
],
),
),
Column(
children: [
widget.catData["pictures"] == [] ||
widget.catData["pictures"].length == 0 ||
widget.catData["pictures"].isEmpty ||
widget.catData["pictures"] == null
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
child: Center(child: Text(" No Image to show")))
: Stack(
children: [
CarouselSlider(
items: widget.catData["tradeWithPictures"]
.map<Widget>((e) {
return Container(
width: Get.width,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: e['url'],
placeholder: (context, url) => Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
);
}).toList(),
carouselController:
postController.carouselController,
options: CarouselOptions(
autoPlay: true,
enableInfiniteScroll: true,
height: Get.height * .7,
viewportFraction: 1.0,
enlargeCenterPage: false,
aspectRatio: 1 / 1.3,
onPageChanged: (index, reason) {
// postController.tradeImagesIndex(index);
// postController.carouselController.nextPage();
},
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.3,
bottom:
MediaQuery.of(context).size.height * 0.3,
left: 0,
right: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10),
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Icon(Icons.arrow_back_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.previousPage();
},
),
ElevatedButton(
child: Icon(Icons.arrow_forward_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.nextPage();
},
),
],
),
),
),
],
),
SizedBox(
height: 10,
),
],
),
Container(
margin: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.catData["title"],
style: TextStyle(
color: AppColors.detailTextsColor,
fontWeight: FontWeight.bold),
),
profileController.userId == widget.catData["user"]
? Container(
height: 0,
width: 0,
)
: InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Offer Trade',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
],

Bottomsheet not allowing the container to show its properties in Flutter

I want to have a draggable bottom sheet for which I have written the code. But the problem is bottom sheet is shown properly but the body has a container and that is not shown. Can somebody help me with the same. If I run the code without bottomsheet it runs properly. I am unable to figure out where is the problem
import 'package:flutter/material.dart';
class HomePage1 extends StatelessWidget {
const HomePage1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: const Color(0xFF1E2129),
body: Stack(
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
],
),
bottomSheet: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
),
);
}
}

DraggableScrollableSheet is always display in bottom no need to attached with bottom sheet,
Just drag into stack (as mentioned below)
Stack(
alignment: AlignmentDirectional.topStart,
children: [
Positioned.fill(
top: 150,
child: Container(
height: height * .4,
width: double.maxFinite,
color: const Color(0xFF1E2129),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(width: 24),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
/* image: DecorationImage(
image: AssetImage('images/p1.png'),
),*/
color: Color(0xFF1E2129),
border: Border.all(
color: const Color(0xFF3B414F), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12)),
),
child: const Icon(
Icons.message,
color: Color(0xFFBBFFF3),
size: 15,
),
),
const SizedBox(
width: 12,
),
const Text(
'Somnio Software',
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
color: Colors.blue,
child: Column(
children: [
Text(
'DIRECT MESSAGES',
style: TextStyle(
color: Colors.grey.shade800,
fontWeight: FontWeight.bold,
fontSize: 10),
),
],
),
),
);
/*Container(
color: Colors.green,
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(5),
child: Card(
child: ListTile(
title: Text('Item $index'),
)),
);
}),
);*/
},
initialChildSize: .6,
)
],
),
See the Output...

you should try a function called bottom Model sheet and make it use in your project..
https://api.flutter.dev/flutter/material/showModalBottomSheet.html
you can find it on flutter api

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.

Categories

Resources