Related
I am building a Job Find app on flutter and I am facing some State Management problems. I have a screen where I show all of my job listings (job_list_screen.dart) and if the user press on a job the app loads this specific job with all the details(job_details_screen.dart).
enter image description here
enter image description here
As you can see, I have an apply button(the blue button) on both screens. When I press apply on the job_details_screen I send a put request on my database and it works fine. But, when I go back to my job_list_screen the button doesn't change even thought I wrapped it with a Consumer.
enter image description here
enter image description here
Here is all the code I wrote with the providers, the **screens **and the **widgets **I use.
The jobs provider:
First of all, this is how I fetch jobs from the API and I insert all my data in a List model:
`
/*
|--------------------------------------------------------------------------
| Fetch Jobs from database
|--------------------------------------------------------------------------
|
| 1. set the url for this function
| 2. GET the response from the server only if you are authenticated
| 3. Decode the
response.body: {
'listings': {
'data': (*Inside here, there are all the job list*)
}
}
| 4. For every job inside the data response
| add a new Job item in the List<Job>
| with the named variables from the current data.reposnse.job
*/
Future<List<Job>?> fetchJobs() async {
final key = await storage.read(key: 'auth');
final baseUrl = AppUrl.baseUrl;
try {
// 1.
var url = Uri.parse('$baseUrl/listings');
// 2.
var response = await http.get(
url,
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer $key',
},
);
// print(key);
if (response.statusCode == 200 || response.statusCode == 201) {
// 3.
var jsonResponse = jsonDecode(response.body)['listings']['data'];
_jobs = [];
// 4.
for (var j in jsonResponse) {
Job job = Job(
id: j['id'],
title: j['title'],
employmentType: j['employmentType'],
major: j['major'],
city: j['city'],
companyName: j['companyName'],
experience: j['experience'],
date: j['date'],
views: j['views'],
description: j['description'],
benefits: j['benefits'],
requirements: j['requirements'],
hasApplied: j['hasApplied'],
hasViewed: j['hasViewed'],
);
_jobs.add(job);
notifyListeners();
}
notifyListeners();
return _jobs;
} else {
throw Exception('Problem loading jobs');
}
} catch (e) {
print(e);
}
}
`
This is the function that I call when the user presses the apply button:
`
/*
|--------------------------------------------------------------------------
| Apply for a job
|--------------------------------------------------------------------------
*/
Future<void> applyJob(String id) async {
final key = await storage.read(key: 'auth');
final baseUrl = AppUrl.baseUrl;
try {
var url = Uri.parse('$baseUrl/listings/$id/apply');
var response = await http.put(
url,
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer $key',
},
);
if (response.statusCode == 200 || response.statusCode == 201) {
print(jsonDecode(response.body));
_hasApplied = jsonDecode(response.body)['hasApplied'];
notifyListeners();
} else {
print(jsonDecode(response.body));
notifyListeners();
}
} catch (e) {
print(e);
}
notifyListeners();
}
`
The job_card widget:
`
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:final_try/screens/job_details_screen.dart';
import '../models/job.dart';
import '../providers/jobs.dart';
import '../styles/colors.dart';
class JobCardBig extends StatefulWidget {
static const routeName = '/job-card-big';
#override
State<JobCardBig> createState() => _JobCardBigState();
}
class _JobCardBigState extends State<JobCardBig> {
#override
Widget build(BuildContext context) {
final job = Provider.of<Job>(context, listen: true);
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(bottom: 10),
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: lightgrey, width: 1),
borderRadius: BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: lightgrey.withOpacity(.5),
spreadRadius: 1,
blurRadius: 2,
offset: Offset(0, 1), // changes position of shadow
),
],
color: white,
),
child: Column(children: [
Container(
child: Row(
children: [
Container(
height: 50,
width: 50,
alignment: Alignment.center,
decoration:
BoxDecoration(shape: BoxShape.circle, color: lightgrey),
),
SizedBox(
width: 10,
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
height: 70,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
job.title.toString(),
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Text(
job.companyName.toString(),
style: TextStyle(
fontSize: 14,
color: lightgrey,
),
),
],
),
),
),
Container(
height: 70,
width: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Icon(
Icons.remove_red_eye,
size: 14,
color: darkgrey,
),
SizedBox(
width: 5,
),
Text(
job.views == null
? job.views = '0'
: job.views.toString(),
style: TextStyle(
fontSize: 14,
color: darkgrey,
),
),
],
),
],
),
),
],
),
),
],
)),
SizedBox(
height: 5,
),
Divider(
thickness: 1,
),
SizedBox(
height: 5,
),
Container(
height: 80,
alignment: Alignment.bottomLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'Είδος Απασχόλησης:',
),
SizedBox(
width: 5,
),
Text(
Provider.of<Jobs>(context, listen: false)
.jobTypeFormat(job.employmentType.toString()),
style: TextStyle(color: lightgrey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Προϋπηρεσία:'),
SizedBox(
width: 5,
),
Flexible(
child: job.experience == null
? Text(
'Δεν απαιτείται',
style: TextStyle(color: lightgrey),
)
: job.experience! > 1
? Text(
'${job.experience.toString()} χρόνια',
style: TextStyle(color: lightgrey),
)
: Text(
'${job.experience.toString()} χρόνο',
style: TextStyle(color: lightgrey),
),
),
],
),
Row(
children: [
Text('Τοποθεσία:'),
SizedBox(
width: 5,
),
Text(
job.city.toString(),
style: TextStyle(color: lightgrey),
),
],
),
Row(
children: [
Text('Δημοσιεύθηκε:'),
SizedBox(
width: 5,
),
Text(
Provider.of<Jobs>(context, listen: false)
.dateFormat(job.date),
// job.date.toString(),
style: TextStyle(color: lightgrey),
),
],
),
],
),
),
Container(
margin: EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
border: Border.all(color: darkgrey, width: 1),
borderRadius: BorderRadius.circular(5.0),
color: darkgrey,
),
child: Text(
'Περισσότερα',
style: TextStyle(color: white),
),
),
onTap: () {
Navigator.of(context)
.pushNamed(JobDetailsScreen.routeName, arguments: job.id)
.then((_) {
// Provider.of<Jobs>(context, listen: false).fetchJobs();
});
},
),
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: job.hasApplied == 1
? Color.fromARGB(255, 196, 76, 68)
: buttonColor,
),
child: Consumer<Job>(
builder: (context, job, child) {
return Text(
job.hasApplied == 1 ? 'Δεν ενδιαφέρομαι' : 'Αίτηση',
style: TextStyle(
color: white,
),
);
},
),
),
],
),
),
]),
);
}
}
`
The job_list_screen:
Here I load all my job_card widgets with ListView.builder
`
import 'package:provider/provider.dart';
import 'package:flutter/material.dart';
import '../styles/colors.dart';
import '../providers/jobs.dart';
import '../widgets/header_screen.dart';
import '../widgets/job_card_big.dart';
class JobListScreen extends StatefulWidget {
static const routeName = '/job-list-screen';
const JobListScreen({super.key});
#override
State<JobListScreen> createState() => _JobListScreenState();
}
class _JobListScreenState extends State<JobListScreen> {
final controller = ScrollController();
bool _firstLoading = true;
var _isLoading = false;
int page = 1;
final _formKey = GlobalKey<FormState>();
String? _searchText;
bool _isFiltered = false;
#override
void initState() {
controller.addListener(() {
if (controller.position.maxScrollExtent == controller.offset) {
fetch();
}
});
super.initState();
}
Future fetch() async {
if (!_isFiltered) {
setState(() {
_isLoading = true;
page++;
Provider.of<Jobs>(context, listen: false)
.fetchMore(page)
.then((_) => _isLoading = false);
});
}
}
#override
void didChangeDependencies() {
if (_firstLoading) {
Provider.of<Jobs>(context, listen: true).fetchJobs().then((_) {
setState(() {
_firstLoading = false;
});
});
}
super.didChangeDependencies();
}
void searchJob() {
if(_searchText == null || _searchText == ''){
setState(() {
_isFiltered = false;
});
}
else setState(() {
Provider.of<Jobs>(context, listen: false).filterJobs(_searchText!);
_isFiltered = true;
});
}
#override
Widget build(BuildContext context) {
final jobsData = Provider.of<Jobs>(context, listen: true);
var jobsList = jobsData.jobs;
var filteredList = jobsData.filteredJobs;
// var jobsListFiltered = jobsData.filteredJobs;
return Scaffold(
body: Stack(
children: [
Container(
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.only(
top: 20,
right: 20,
left: 20,
),
child: Column(
children: [
HeaderScreen(title: 'Αγγελίες'),
Container(
child: Form(
key: _formKey,
child: Row(
children: [
Expanded(
child: Container(
child: TextFormField(
decoration: InputDecoration(
hintText: 'Enter some text',
),
onSaved: (value) {
_searchText = value;
},
),
),
),
Container(
margin: EdgeInsets.only(top: 10, bottom: 5),
height: 40,
width: 40,
child: ElevatedButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(white),
backgroundColor: MaterialStateProperty.all<Color>(
primaryColor),
),
child: Container(
child: Icon(Icons.search),
),
onPressed: () {
_formKey.currentState?.save();
searchJob();
},
),
),
],
),
),
),
SizedBox(
height: 10,
),
Divider(
thickness: 1,
),
SizedBox(
height: 10,
),
Expanded(
child: !_isFiltered
? Container(
child: !_firstLoading
? ListView.builder(
controller: controller,
itemCount: jobsList.length,
itemBuilder: (ctx, i) =>
ChangeNotifierProvider.value(
value: jobsList[i],
child: Column(
children: [
JobCardBig(),
],
),
),
)
: Center(
child: CircularProgressIndicator(),
),
)
: Container(
child: !_firstLoading
? ListView.builder(
controller: controller,
itemCount: filteredList.length,
itemBuilder: (ctx, i) =>
ChangeNotifierProvider.value(
value: filteredList[i],
child: Column(
children: [
JobCardBig(),
],
),
),
)
: Center(
child: CircularProgressIndicator(),
),
),
),
],
),
),
Positioned(
child: _isLoading
? Container(
width: double.infinity,
height: MediaQuery.of(context).size.height,
color: Color.fromARGB(52, 0, 0, 0),
child: Center(
child: CircularProgressIndicator(),
),
)
: Container(),
),
],
),
);
}
}
`
I tried to load my fetchJobs() function when the user exits the job_details_screen but even though it works, it is not the right solution. The reason why I say that this is not the right way, is because of this possible scenario:
If the user scrolls down a lot, and the app load 60 jobs, then if he presses on job 60, and he exit the job_details_screen, the app will load the first 15 jobs and the user will have to scroll down again. And that's not the user experience I want to provide.
I am searching for a solution that will update only the apply button and it will not need to recreate the whole list. Plus, with this solution the user will go back to the same scroll point he was when he entered the job_details_screen.
I hope I explained my problem properly. This is the first time I upload a question here and I would also like to mention that this is my first project on flutter so don't judge my code too harshly.
Thanks in advance!!
I've created a screen where I can use a button to open the camera and take video. And above that button, I made a container to display the video. But I want to show this container containing video to display on the next page. As I am new to flutter, I believe my code is messy. Can you help me with how to do this?
And how to show multiple videos on a screen after taking them through this camera in a loop like this image here?
Here is my code -
class video_record02 extends StatefulWidget {
final Function? onSelectVideo;
const video_record02({Key? key, this.onSelectVideo});
#override
_video_record02State createState() => _video_record02State();
}
class _video_record02State extends State<video_record02> {
String dropdownValue = 'Bedroom';
File? storedVideo;
Future<void> _takeVideo() async {
final picker = ImagePicker();
final videoFile = await picker.pickVideo(
source: ImageSource.camera,
preferredCameraDevice: CameraDevice.rear,
maxDuration: Duration(
seconds: 25,
),
);
if (videoFile == null) {
return;
}
final rlyvideoFile = File(videoFile.path);
setState(() {
storedVideo = rlyvideoFile;
});
final appDir = await syspaths.getApplicationDocumentsDirectory();
final fileName = path.basename(rlyvideoFile.path);
final savedVideo = await rlyvideoFile.copy('${appDir.path}/$fileName');
widget.onSelectVideo?.call(savedVideo);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Center(
child: ListView(
shrinkWrap: true,
children: [
Column(
children: [
Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(
width: 0.5,
color: Colors.grey,
),
),
child: storedVideo != null
? VideoWidget(storedVideo!)
: Text(
'No Video Taken',
textAlign: TextAlign.center,
),
alignment: Alignment.center),
Align(
alignment: Alignment.center,
child: Column(
children: [
IconButton(
icon: Icon(Icons.play_circle_fill),
color: Colors.red,
iconSize: 100.0,
onPressed: _takeVideo,
),
],
),
),
Text(
'Click to start',
style: TextStyle(
fontSize: 25.0,
color: Colors.red,
fontWeight: FontWeight.w300,
),
),
Container(
margin: EdgeInsets.fromLTRB(125, 0, 125, 0),
height: 50,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: TextButton(
child: Text(
'< Back',
style: TextStyle(fontSize: 17, color: Colors.black),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => video_record01()),
);
},
),
),
],
),
],
),
),
),
);
}
}
I am trying to implement a review page for products.
I trying to show the products images in a expansionTile (see second image).
Under the expansionTile I add my buttons.
My problem:
To show the expansionTile list I must give the container a fix height.
But if I have less images in my list the screen show a white space (second image).
How can I make the container height dynamic to hide the white space?
Here my example:
If I add some pictures my screen looks like this.
How I can hide the white space between list and buttons?
Here my Code:
Container(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
child: ListView(
children: [
ExpansionTile(
title: Text('Pictures'),
onExpansionChanged: (value) {
setState(
() {},
);
},
children: List<Widget>.generate(
_imageList.length,
(index) => ListTile(
title: Text(_imageList[0]
.path
.split('/')
.last
.length >
25
? _imageList[0]
.path
.split('/')
.last
.substring(0, 25) +
'...'
: _imageList[index].path.split('/').last),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(
Icons.delete_outline,
size: 20.0,
color: _selected![index]
? Colors.red
: Colors.red,
),
onPressed: () {
setState(() {
_selected![index] =
!_selected![index];
_imageList.removeAt(index);
});
},
),
],
),
),
),
),
],
),
)
Here my full code:
class ReviewPage1 extends StatefulWidget {
//passed paramter
final String _productID;
ReviewPage1(this._productID, {Key? key}) : super(key: key);
#override
_ReviewPage1 createState() => _ReviewPage1(_productID);
}
class _ReviewPage1 extends State<ReviewPage1> {
///passed paramter
final String _productID;
_ReviewPage1(this._productID);
//controller
final TextEditingController _controllerReviewTitle = TextEditingController();
final TextEditingController _controllerReviewDescription =
TextEditingController();
//image
List<File> _imageList = [];
var _image;
var imagePicker;
//list tile color
List<bool>? _selected = [];
//stars
var rating = 1;
#override
void initState() {
super.initState();
imagePicker = new ImagePicker();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customSubAppBar("Create Review", context),
body: SingleChildScrollView(
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
child: Column(
children: [
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.05,
MediaQuery.of(context).size.width * 0,
null,
),
//text
Row(
children: [
customText(
'Rate your expreince',
Colors.black,
20,
FontWeight.bold,
null,
),
],
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.02,
MediaQuery.of(context).size.width * 0,
null,
),
//stars rating
Row(
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(4, (index) {
return GestureDetector(
onTap: () {
setState(() {
// Toggle light when tapped.
print('star at index: ' + index.toString());
rating = index + 1;
});
},
child: Padding(
padding: const EdgeInsets.only(right: 8),
child: Icon(
//index < rating ? Icons.star : Icons.star_border,
Icons.star,
size: 30,
color: index < rating
? Theme.of(context).primaryColor
: Colors.black.withOpacity(0.5),
)));
}),
),
Spacer(),
],
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.08,
MediaQuery.of(context).size.width * 0,
null,
),
//text
Row(
children: [
customText(
'Review Title',
Colors.black,
20,
FontWeight.bold,
null,
),
],
),
//textfield review title
customDefaultTextField(
50,
1,
TextInputType.text,
_controllerReviewTitle,
1,
false,
Colors.black87,
Theme.of(context).primaryColor,
false,
Theme.of(context).primaryColor,
0,
0,
Theme.of(context).primaryColor,
0,
0,
'Title *',
'Enter Your Title',
Colors.black12,
2,
0,
Theme.of(context).primaryColor,
2,
0,
null,
0,
0,
0,
0,
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.08,
MediaQuery.of(context).size.width * 0,
null,
),
//text
Row(
children: [
customText(
'Write Review',
Colors.black,
20,
FontWeight.bold,
null,
),
],
),
//textfield review description
customDefaultTextField(
50,
1,
TextInputType.text,
_controllerReviewDescription,
1,
false,
Colors.black87,
Theme.of(context).primaryColor,
false,
Theme.of(context).primaryColor,
0,
0,
Theme.of(context).primaryColor,
0,
0,
'Write your Expreinces *',
'Enter your Expreinces',
Colors.black12,
2,
0,
Theme.of(context).primaryColor,
2,
0,
null,
0,
0,
0,
0,
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.08,
MediaQuery.of(context).size.width * 0,
null,
),
//text
Row(
children: [
customText(
'Enter your picture',
Colors.black,
20,
FontWeight.bold,
null,
),
],
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.03,
MediaQuery.of(context).size.width * 0,
null,
),
//take image
GestureDetector(
onTap: () async {
var source = ImageSource.camera;
XFile? image = await imagePicker.pickImage(
source: source,
imageQuality: 50,
preferredCameraDevice: CameraDevice.front);
setState(
() {
_image = File(image!.path);
_imageList.add(_image);
_selected!.add(false);
},
);
},
child: Stack(
children: [
//icon
Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.1,
decoration: BoxDecoration(
color:
Theme.of(context).primaryColor.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(8))),
child: Center(
child: customIcon(
Icons.camera_alt_rounded, Colors.black87, 30)),
),
//border
Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.height * 0.1,
child: DashedRect(
color: Colors.black87,
strokeWidth: 2.0,
gap: 10.0,
),
),
],
),
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.03,
MediaQuery.of(context).size.width * 0,
null,
),
//show images
_imageList.length != 0
? //IntrinsicHeight(
Container(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width * 0.8,
child: ListView(
children: [
ExpansionTile(
title: Text('Pictures'),
onExpansionChanged: (value) {
setState(
() {},
);
},
children: List<Widget>.generate(
_imageList.length,
(index) => ListTile(
title: Text(_imageList[0]
.path
.split('/')
.last
.length >
25
? _imageList[0]
.path
.split('/')
.last
.substring(0, 25) +
'...'
: _imageList[index].path.split('/').last),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(
Icons.delete_outline,
size: 20.0,
color: _selected![index]
? Colors.red
: Colors.red,
),
onPressed: () {
setState(() {
_selected![index] =
!_selected![index];
_imageList.removeAt(index);
});
},
),
],
),
),
),
),
],
),
)
//)
: Container(),
//text cancel
Container(
width: MediaQuery.of(context).size.width * 0.8,
child: TextButton(
child: Text(
'Send Review',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
style: TextButton.styleFrom(
primary: Colors.black,
backgroundColor: Colors.greenAccent[400],
onSurface: Colors.grey,
),
onPressed: () {
if (_checkInputValuesEmpty(
context, _controllerReviewTitle.text, 'title') &&
_checkInputValuesEmpty(
context,
_controllerReviewDescription.text,
'description')) {
final String _userID =
FirebaseAuth.instance.currentUser!.uid;
_uploadFile(_userID, _productID, context, _imageList);
}
},
),
),
//size box
customSizedBox(
MediaQuery.of(context).size.height * 0.01,
MediaQuery.of(context).size.width * 0,
null,
),
//text send review
Container(
width: MediaQuery.of(context).size.width * 0.8,
child: TextButton(
child: Text(
'Cancel',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
style: TextButton.styleFrom(
primary: Colors.black,
backgroundColor: Color.fromRGBO(170, 170, 170, 1),
onSurface: Colors.grey,
),
onPressed: () async {},
),
),
],
),
),
),
),
//sidebar
drawer: CustomSideBar(context),
);
}
//upload review images
Future _uploadFile(_userID, _productID, context, _imageList) async {
var downloadURLs = [];
for (var image in _imageList) {
String url;
String postId = DateTime.now().millisecondsSinceEpoch.toString();
String fileName = 'reviewImage_${_productID}_${postId}';
Reference ref = FirebaseStorage.instance
.ref()
.child("images/review/review_images/" + _productID + '/' + _userID)
.child(fileName);
await ref.putFile(image);
url = fileName;
downloadURLs.add(url);
}
//upload review data
_addReviewData(_productID, downloadURLs, _userID);
}
//add review data in db
_addReviewData(_productID, downloadURLs, _userID) async {
final String _userID = FirebaseAuth.instance.currentUser!.uid;
FirebaseFirestore.instance
.collection('review')
.doc('productID_' + _productID)
.collection("userID_" + _userID)
.doc('review_data')
.set({
'stars': rating,
'title': _controllerReviewTitle.text,
'description': _controllerReviewDescription.text,
'image_url': downloadURLs,
});
//Navigator.of(context).pushReplacement(
// MaterialPageRoute(builder: (context) => VerifyRegisterEmail()));
}
}
_checkInputValuesEmpty(context, text, field) {
if (text.toString().length == 0) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Enter text in field ${field}'),
));
return false;
} else {
return true;
}
}
Can I give the container a dynamic height which has always the same height how the listview with my image names?
try find this place and add after Colum mainAxisAlignment: MainAxisAlignment.start,
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: customSubAppBar("Create Review", context),
body: SingleChildScrollView(
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.8,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
I'm using multi_image_picker library to select Assets from the gallery, This is working fine. How can I select the images as File using the same library?
this is my code I got it from the multi_image_picker documentation,
import 'package:exa/Controller/DatabaseHelper.dart';
import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'dart:async';
class UpdateStatus extends StatefulWidget {
#override
_UpdateStatusState createState() => _UpdateStatusState();
}
class _UpdateStatusState extends State<UpdateStatus> {
DatabaseHelper databaseHelper=new DatabaseHelper();
List<Asset> images = List<Asset>();
String error = 'Error Dectected';
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Create Post'),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(18.0),
child: InkWell(
child: Text(
'POST',
style: TextStyle(fontSize: 18.0),
),
onTap: () async {
print('work');
/*
for (int i = 0; i < images.length; i++) {
var path = await FlutterAbsolutePath.getAbsolutePath(images[i].identifier);
print(path);
}
*/
databaseHelper.uploadpostsimages(images);
},
),
)
],
),
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: 200.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 100,
style: new TextStyle(fontSize: 18.0, color: Colors.black),
decoration: InputDecoration(
hintText: 'Enter your Post Details Here !',
border: InputBorder.none,
),
),
),
),
Divider(
thickness: 1.0,
),
Column(
children: <Widget>[
Container(
height: 40.0,
color: Colors.white70,
child: Padding(
padding: EdgeInsets.only(
left: 18.0,
),
child: InkWell(
child: Row(
children: <Widget>[
Icon(
Icons.add_a_photo,
),
Text(
" Choose Image",
style: TextStyle(
fontSize: 24.0,
),
),
],
),
onTap: loadAssets,
),
),
),
Divider(
thickness: 1.0,
),
Container(
height: 40.0,
color: Colors.white70,
child: Padding(
padding: EdgeInsets.only(
left: 18.0,
),
child: InkWell(
child: Row(
children: <Widget>[
Icon(
Icons.add_photo_alternate,
),
Text(
" Choose Video",
style: TextStyle(
fontSize: 24.0,
),
),
],
),
onTap: () {
print('choose video from local');
},
),
),
),
],
),
Divider(
thickness: 1.0,
),
Container(
height: 200,
child: Column(
children: <Widget>[
Expanded(
child: buildGridView(),
)
],
),
),
],
),
),
),
);
}
Future<void> loadAssets() async {
List<Asset> resultList = List<Asset>();
String error = 'No Error Dectected';
try {
resultList = await MultiImagePicker.pickImages(
maxImages: 300,
enableCamera: true,
selectedAssets: images,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
actionBarColor: "#abcdef",
actionBarTitle: "Ilma",
allViewTitle: "All Photos",
useDetailsView: false,
selectCircleStrokeColor: "#000000",
),
);
} on Exception catch (e) {
error = e.toString();
}
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
setState(() {
images = resultList;
error = error;
});
}
Widget buildGridView() {
return GridView.count(
crossAxisCount: 3,
children: List.generate(images.length, (index) {
Asset asset = images[index];
return AssetThumb(
asset: asset,
width: 300,
height: 300,
);
}),
);
}
}
I think you don't need images as File.
You can get a List of Assets from multi_image_picker and it can display using AssetThumb() method.
AssetThumb(
asset: asset,
width: 100,
height: 100,),
and To Upload it to the server, You can get the byte array from the Assets
ByteData byteData = await asset.getByteData();
List<int> imageData = byteData.buffer.asUint8List();
then it can pass through MultipartFile.fromBytes() method.
so it will look like,
String url = "upload/url";
List<Asset> images = List<Asset>();
List<MultipartFile> multipartImageList = new List<MultipartFile>();
if (null != images) {
for (Asset asset in images) {
ByteData byteData = await asset.getByteData();
List<int> imageData = byteData.buffer.asUint8List();
MultipartFile multipartFile = new MultipartFile.fromBytes(
imageData,
filename: 'load_image',
contentType: MediaType("image", "jpg"),
);
multipartImageList.add(multipartFile);
}
FormData formData = FormData.fromMap({
"multipartFiles": multipartImageList,
"userId": '1'
});
Dio dio = new Dio();
var response = await dio.post(url, data: formData);
}
I've got a new transaction screen with several textfields and a container at the bottom for shortcuts:
And when i trigger a textfield the grey container moves up as well:
Here is my code for the screen:
//import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
//import 'package:flutter/services.dart';
import '../items/icon_picket_item.dart';
import '../items/select_transaction_item.dart';
import '../providers/user_transactions.dart';
import '../providers/icon_auswahl.dart';
import '../providers/account_type.dart';
import '../providers/user_settings/single_multiple_acc.dart';
import 'package:provider/provider.dart';
import '../storag/locale.dart';
import '../storag/foundation.dart';
import '../my_icons.dart';
class NewTransactionScreen extends StatefulWidget {
static const routeName = '/new-transaction';
#override
_NewTransactionScreenState createState() => _NewTransactionScreenState();
}
class _NewTransactionScreenState extends State<NewTransactionScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final _titleController = TextEditingController(text: '');
final _amountController = TextEditingController(text: '-10.00');
final _accountController = TextEditingController();
final _notesController = TextEditingController();
final _repeatController = TextEditingController();
DateTime _selectedDate;
Color _correct = Colors.white54;
final data = [];
void _colorCorrect() {
final enteredTitle = _titleController.text;
final enteredAmount = _amountController.text;
final enteredAccount = _accountController.text;
final enteredRepeat = _repeatController.text;
Color color;
if (enteredTitle.isEmpty ||
enteredAmount.isEmpty ||
enteredAccount.isEmpty ||
enteredRepeat.isEmpty) {
color = Colors.white54;
} else {
color = Colors.white;
}
setState(() {
_correct = color;
});
}
void _submitData(String choiceId, NewTransactions transactions, iconData,
GeldKonto kontoss) {
//onSubmitted gives you a string
if (_amountController.text.isEmpty) {
return;
}
final enteredTitle = _titleController.text;
final enteredAmount = _amountController.text;
final enteredAccount = _accountController.text;
final enteredNotes = _notesController.text;
final enteredRepeat = _repeatController.text;
Icon enteredIcon = iconData.taken;
if (enteredTitle.isEmpty ||
enteredAmount.isEmpty ||
enteredAccount.isEmpty ||
enteredRepeat.isEmpty) {
return; //means code stops here and addTx doesnt run
} else {
transactions.addNewtransaction(
xTitle: enteredTitle,
xAmount: double.parse(enteredAmount) <= 0
? double.parse(enteredAmount) * (-1)
: double.parse(enteredAmount),
xchosenDate: _selectedDate == null ? DateTime.now() : _selectedDate,
xAccountType: enteredAccount,
xNotes: enteredNotes,
xRepeat: enteredRepeat,
xIcon: enteredIcon,
xId: DateTime.now().toString(),
xchoiceId: choiceId);
}
Navigator.of(context).pop(context);
// .pop closes modalsheet , you have the property contexyt cause of extends state
}
Container _buildTransactionRow(
{Text typedText,
Function onPress,
comparisonStuff,
Icon icon,
double iconSpace,
double iconAfterSpace}) {
final mediaQuery = MediaQuery.of(context);
return Container(
// padding: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(height: 1, width: iconSpace),
icon,
SizedBox(height: 1, width: iconAfterSpace), //25
SizedBox(
width: mediaQuery.size.width * 0.75,
child: GestureDetector(
onTap: onPress,
child: Column(
//crossAxisAlignment: CrossAxisAlignment.,
children: <Widget>[
SizedBox(height: 17, width: 1),
SizedBox(
width: mediaQuery.size.width * 0.75,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 1,
width: 4,
),
typedText
],
),
),
SizedBox(height: 10, width: mediaQuery.size.width * 0.04),
SizedBox(
height: 1,
width: mediaQuery.size.width * 0.75,
child: const Divider(
color: Colors.white54,
thickness: 1,
),
),
],
),
),
),
],
),
);
}
Widget _buildAppBar(String pageTitle, NewTransactions transactions,
GeldKonto kontoss, String choiceId) {
return AppBar(
automaticallyImplyLeading: false,
leading: isIos == true
? IconButton(
icon: Icon(CupertinoIcons.back, size: 30, color: Colors.white),
onPressed: () => Navigator.of(context).pop(context),
)
: IconButton(
icon: Icon(Icons.arrow_back, size: 30, color: Colors.white),
onPressed: () => Navigator.of(context).pop(context),
),
centerTitle: true,
title: Text(
pageTitle,
style: const TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.w400,
),
textAlign: TextAlign.end,
),
actions: <Widget>[
Consumer<IconAuswahl>(
builder: (ctx, iconData, child) => IconButton(
padding: EdgeInsetsDirectional.only(
start: 15,
end: 25,
top: 5,
bottom: 0,
),
icon: Icon(
MyIcon.correct,
size: 45,
color: _correct,
),
onPressed: () =>
_submitData(choiceId, transactions, iconData, kontoss),
),
),
],
backgroundColor: Color(0xffb00374a),
);
}
Widget _buildColumn(
BuildContext context, AppBar appBar, local, String choiceId) {
final mediaQuery = MediaQuery.of(context);
return Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [Colors.black, Color(0xffb00374a)],
),
),
),
Positioned(
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.08,
color: Colors.grey),
),
SingleChildScrollView(
child: Container(
height: (mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top ) * 1.05 ,
padding: EdgeInsets.only(
top: 10,
left: 20,
right: 10,
bottom:0,
//
// so that the whole thing always move +10
),
child: Consumer<SinlgeOrMultiple>(
builder: (_, data, __) => data.multipleAcc == true
? Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// CupertinoTextField(
// ),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? 'Bankkonto'
: 'Mein Ausgewähltes Zeug',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.account, size: 38),
iconSpace: 3,
iconAfterSpace: 20,
onPress: () {}),
Row(children: <Widget>[
SizedBox(width: 3.5),
choiceId == '0'
? const Icon(
MyIcon.paying,
color: Colors.white,
size: 25,
)
: const Icon(
MyIcon.earning,
color: Colors.white,
size: 43,
),
const SizedBox(width: 33),
SelectTransactionItem(
choiceId == '0' //id of new outcome
? '-${oCcyy.format(0)}'
: '${oCcyy.format(0)}',
_amountController,
false,
_colorCorrect),
]),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconPicked(_scaffoldKey, choiceId),
const SizedBox(
width:
14),
SelectTransactionItem(
'Titel',
_titleController,
true,
_colorCorrect),
],
),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? 'Jede 2 Woche'
: 'Ausgewählter Stuff',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.runningtime, size: 40),
iconSpace: 0,
iconAfterSpace: 20,
onPress: () {}),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? '${DateFormat.yMd(local).format(DateTime.now())}'
: '${DateFormat.yMMMd().format(_selectedDate)}',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.calender, size: 39),
iconSpace: 3,
iconAfterSpace: 18,
onPress: () {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return SizedBox(
height: MediaQuery.of(context)
.copyWith()
.size
.height /
3,
child: CupertinoDatePicker(
//backgroundColor: Color(0xffb00374a),
initialDateTime: DateTime.now(),
onDateTimeChanged:
(DateTime pickedDate) {
if (pickedDate == null) {
return;
}
setState(() {
_selectedDate = pickedDate;
});
},
// use24hFormat: true,
maximumDate: DateTime.now(),
minimumYear: 2010,
maximumYear: 2020,
//minuteInterval: 1,
mode: CupertinoDatePickerMode.date,
),
);
});
},
),
Row(
children: <Widget>[
const SizedBox(width: 3.5),
const Icon(
MyIcon.notes,
color: Colors.white,
size: 37,
),
const SizedBox(width: 20),
SelectTransactionItem('Notizen', _notesController,
false, _colorCorrect),
],
),
Container(
width: 0.1,
height: MediaQuery.of(context).size.height * 0.08,
color: Colors.transparent),
])
: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(children: <Widget>[
const SizedBox(width: 3.5),
choiceId == '0'
? const Icon(
MyIcon.paying,
color: Colors.white,
size: 25,
)
: const Icon(
MyIcon.earning,
color: Colors.white,
size: 43,
),
const SizedBox(width: 33),
SelectTransactionItem(
choiceId == '0' //id of new outcome
? '-${oCcyy.format(0)}'
: '${oCcyy.format(0)}',
_amountController,
false,
_colorCorrect),
]),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconPicked(_scaffoldKey, choiceId),
const SizedBox(
width:
14),
SelectTransactionItem(
'Titel',
_titleController,
true,
_colorCorrect),
],
),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? 'Jede 2 Woche'
: 'Ausgewählter Stuff',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.runningtime, size: 40),
iconSpace: 0,
iconAfterSpace: 20,
onPress: () {}),
_buildTransactionRow(
comparisonStuff: _selectedDate,
typedText: Text(
_selectedDate == null
? '${DateFormat.yMd(local).format(DateTime.now())}'
: '${DateFormat.yMMMd().format(_selectedDate)}',
style: Theme.of(context).textTheme.title),
icon: const Icon(MyIcon.calender, size: 39),
iconSpace: 3,
iconAfterSpace: 18,
onPress: () {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return SizedBox(
height: MediaQuery.of(context)
.copyWith()
.size
.height /
3,
child: CupertinoDatePicker(
//backgroundColor: Color(0xffb00374a),
initialDateTime: DateTime.now(),
onDateTimeChanged:
(DateTime pickedDate) {
if (pickedDate == null) {
return;
}
setState(() {
_selectedDate = pickedDate;
});
},
// use24hFormat: true,
maximumDate: DateTime.now(),
minimumYear: 2010,
maximumYear: 2020,
//minuteInterval: 1,
mode: CupertinoDatePickerMode.date,
),
);
});
},
),
Row(
children: <Widget>[
const SizedBox(width: 3.5),
const Icon(
MyIcon.notes,
color: Colors.white,
size: 37,
),
const SizedBox(width: 20),
SelectTransactionItem('Notizen', _notesController,
false, _colorCorrect),
],
),
Container(
width: 0.1,
height: MediaQuery.of(context).size.height * 0.08,
color: Colors.transparent),
])),
),
),
]);
}
#override
Widget build(BuildContext context) {
var local = Localizations.localeOf(context).toString();
final routeArgs =
ModalRoute.of(context).settings.arguments as Map<String, String>;
final _pageTitle = routeArgs['pageTitle'];
final _choiceId = routeArgs['id'];
final transactions = Provider.of<NewTransactions>(context, listen: false);
final kontoss = Provider.of<GeldKonto>(context, listen: false);
final PreferredSizeWidget appBar =
_buildAppBar(_pageTitle, transactions, kontoss, _choiceId);
return
// SafeArea(
// child:
Scaffold(
key: _scaffoldKey,
appBar: appBar,
// body: Stack(
// children: <Widget>[
body: _buildColumn(context, appBar, local, _choiceId),
//),
);
}
}
It is fine when i open the upper textfield but the container overlap when opening the last textfield. I can scroll up to see the notes ,,textfield'', but it looks ugly when I open the notes ,,textfield'' and the thing is overlapping. Is there a way to move the textfield up automatically or just preventing that the Container is pushed up as well?
I tried to put the padding of the textfield column Container to + 10, but it squeezed the whole page.
padding: EdgeInsets.only(
top: 10,
left: 10,
right: 10,
bottom: MediaQuery.of(context).viewInsets.bottom +
10, // so that the whole thing always move +10
),
Do you have any advice to solve the problem?
Try adding resizeToAvoidBottomInset: false to your scaffold
Try wrapping Scaffold widget with a Stack and then put the Container widget after Scaffod
If you need to hide some widgets when keyboard is visible, you can use this package: https://pub.dev/packages/flutter_keyboard_visibility
Example:
KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
return isKeyboardVisible
? const SizedBox()
: const MyButton();
}),
I don't like using resizeToAvoidBottomPadding: false, because, when you have a text field, it doesn't allow to move the text field to the top of keyboard.