Flutter DropZone always showing Circular Progress Indicator - flutter

I'm trying to implement the flutter_dropzone 3.0.5 plugin in my app but can't figure out why it seems to be always loading, making it impossible to drop a file in the dropzone area...
Here is my code so far:
class UploadDocument extends StatefulWidget {
final logger = getLogger("UploadDocument view");
UploadDocument({Key? key}) : super(key: key);
#override
State<UploadDocument> createState() => _UploadDocumentState();
}
class _UploadDocumentState extends State<UploadDocument> {
late DropzoneViewController controller;
#override
Widget build(BuildContext context) {
return Card(
elevation: 8,
child: Padding(
padding: const EdgeInsets.all(50),
child: Container(
color: ProjectColors.lighterAccentColor,
child: Stack(
children: [
DropzoneView(
onCreated: (controller) => this.controller = controller,
onDrop: acceptFile,
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Icon(
Icons.cloud_upload,
color: ProjectColors.blackBgExtraLighter,
size: 50,
),
Text("Drop Files Here",
style: TextStyle(
color: ProjectColors.blackBgExtraLighter,
fontSize: 20))
],
),
),
],
)),
),
);
}
Future acceptFile(dynamic event) async {
final name = event.name;
final mime = await controller.getFileMIME(event);
final bytes = await controller.getFileSize(event);
final url = await controller.createFileUrl(event);
widget.logger.i('name: $name');
widget.logger.i('mime: $mime');
widget.logger.i('bytes: $bytes');
widget.logger.i('url: $url');
}
}
and the result :
Thanks in advance for any advice!!!

Related

initState called after build drawer menu

I have a drawer menu in my scaffold, and I want to show some information from Flutter secure storage.
class DrawerMenu extends StatefulWidget {
final Translations translations;
final PageController controller;
const DrawerMenu({
Key? key,
required this.translations,
required this.controller,
}) : super(key: key);
#override
State<DrawerMenu> createState() => _DrawerMenuState();
}
String? name;
String? email;
final FlutterSecureStorage storage = FlutterSecureStorage();
class _DrawerMenuState extends State<DrawerMenu> {
#override
void initState() {
getInfo();
super.initState();
}
getInfo() async {
name = await storage.read(key: 'name');
email = await storage.read(key: 'email');
}
#override
Widget build(BuildContext context) {
Translations translations = Translations.of(context);
return Drawer(
backgroundColor: AppColors.secondaryColor,
child: SafeArea(
bottom: false,
child: Column(
children: [
ClipOval(
child: Container(
color: AppColors.primaryColor,
height: 60.0,
width: 60.0,
child: Center(
child: Text(
name![0],
style: TextStyle(
color: AppColors.secondaryColor,
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
),
),
);
}
}
The first time I have this error: _CastError (Null check operator used on a null value)
But if I try to go next and re open drawer, so done!
I want to see the name in my drawer menu.
You have to set the state after setting the value in getInfo(). Also, you have to check if the name is null or not before accessing it.
getInfo() async {
name = await storage.read(key: 'name');
email = await storage.read(key: 'email');
setState({}); <-- add this
}
#override
Widget build(BuildContext context) {
Translations translations = Translations.of(context);
return Drawer(
backgroundColor: AppColors.secondaryColor,
child: SafeArea(
bottom: false,
child: Column(
children: [
ClipOval(
child: Container(
color: AppColors.primaryColor,
height: 60.0,
width: 60.0,
child: Center(
child: Text(
name==null? "" : name![0] ?? "", <-- update this
style: TextStyle(
color: AppColors.secondaryColor,
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
),
),
);
}
}

Getting Textvalues on other Page

im trying to put the Textvalue, i have created via Texteditingcontroller into the text on the Neuigkeiten Page via controller.value, so the texteditingvalue gets displayed on the other page, but my texteditingcontroller do not get recognised in the neugkeitenpage and i cant edit anything there at all.
class InformationContentDetails extends StatefulWidget {
const InformationContentDetails({Key key}) : super(key: key);
#override
State<InformationContentDetails> createState() => _InformationContentDetails();
}
class _InformationContentDetails extends State<InformationContentDetails> {
bool isEnable = false;
var _controller = new TextEditingController(text: 'Allgemeine Informationen');
var _controller2 = TextEditingController();
String name = "Allgemeine Informationen";
String name2 = "Herzlich Willkommen ...";
textlistener(){
print("Update: ${_controller.text}");
print("Update: ${_controller2.text}");
}
#override
void initState() {
super.initState();
// Start listening to changes
_controller.addListener(textlistener);
_controller2.addListener(textlistener);
}
#override
Widget build(BuildContext context) {
return ResponsiveBuilder(
builder: (context, sizingInformation) {
var textAlignment;
if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
textAlignment = TextAlign.left;
} else {
textAlignment = TextAlign.center;
}
return Container(
width: 650,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"${_controller.text}",
style: titleTextStyle(sizingInformation.deviceScreenType),
textAlign: textAlignment,
),
TextField(
enabled: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "Informationen aktualisieren",
),
controller : _controller,
),
FlatButton(
child: Text('bearbeiten'),
onPressed:(){
setState((){
name = _controller.text;
isEnable = !isEnable;
});
},
),
Text(
name2,
style: descriptionTextStyle(sizingInformation.deviceScreenType),
textAlign: textAlignment,
),
Container(
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "Informationstext aktualisieren"
),
controller : _controller2,
),
),
Container(
child: FlatButton(
child: Text('bearbeiten'),
onPressed:(){
setState((){
name2 = _controller2.text;
isEnable = !isEnable;
});
},
),
),
],
)),
);
},
);
}
#override
void dispose() {
_controller.dispose();
_controller2.dispose();
super.dispose();
}
}
class NeuigkeitenContentDetails extends StatefulWidget {
const NeuigkeitenContentDetails({Key key}) : super(key: key);
#override
State<NeuigkeitenContentDetails> createState() => _NeuigkeitenContentDetailsState();
}
class _NeuigkeitenContentDetailsState extends State<NeuigkeitenContentDetails> {
#override
Widget build(BuildContext context) {
return ResponsiveBuilder(
builder: (context, sizingInformation) {
var textAlignment;
if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {
textAlignment = TextAlign.left;
} else {
textAlignment = TextAlign.center;
}
return Container(
width: 650,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Neuigkeiten',
style: titleTextStyle(sizingInformation.deviceScreenType),
textAlign: textAlignment,
),
SizedBox(
height: 30,
),
Text(
'Herzlich Willkommen',
style: descriptionTextStyle(sizingInformation.deviceScreenType),
textAlign: textAlignment,
)
],
),
);
},
);
}
}
It isn't clear from your code what you mean by pages.
How does InformationContentDetails relate to, or interact with, NeuigkeitenContentDetails?
If you are using e.g. named routes you may want to look at e.g. Pass arguments to a named route and or Send data to a new screen, if on the other hand you need to send information between different widgets in the widget tree you may need to look at something like Provider - allowing you to read-only or watch for change and rebuild subscribed code, or other state management solutions.
Otherwise, if they exist simultaneously in the widget tree and you don't want to use a dedicated state management solution you need to pass the necessary data up-and-down through parameters which can get messy. H.t.h.

'String' is not a sub type of type map<String, dynamic> flutter error

//Hello, I am trying to pass Map as an argument to the new screen but it ends in error with a red screen. here is my code first the class where the Map is defined, I am using firebase for a database with this app.
I am trying to make get job app so the employer post the job(i use textformfield) but when I try to received data as a map it show error
class FloatSearchBar extends StatefulWidget {
const FloatSearchBar({Key? key}) : super(key: key);
#override
FloatSearchBarState createState() => FloatSearchBarState();
}
class FloatSearchBarState extends State<FloatSearchBar> with WidgetsBindingObserver {
Map<String, dynamic>? userMap;
late FloatingSearchBarController controller;
static const historyLength = 4;
#override
void initState() {
super.initState();
controller = FloatingSearchBarController();
filteredSearchHistory = filterSearchTerms(filter: null);
}
isLoading = true;
});
FirebaseFirestore _firestore = FirebaseFirestore.instance;
await _firestore
.collection("PostJob")
.where("jobType", isEqualTo: selectedTerm.toLowerCase())
.get()
.then((value) {
setState(() {
userMap = value.docs[0].data();
isLoading = false;
});
print(userMap);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => searchresultPage(
recevieduserMap: userMap!['jobType'], key: UniqueKey())));
});
}
...
*and now the class which is getting pushed:-
...class searchresultPage extends StatelessWidget {
FloatSearchBar yes = new FloatSearchBar();
Map<String, dynamic> recevieduserMap ;
searchresultPage({required this.recevieduserMap,Key? key,}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Positioned.fill(
top: 70,
child: Align(
alignment: Alignment.center,
child: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Card(
elevation: 15,
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(padding: EdgeInsets.all(2)),
Text('Job Type:- ' + recevieduserMap["jobType"],style: GoogleFonts.breeSerif(
textStyle: TextStyle(
fontSize: 20,wordSpacing: 1),),),
Text('Job Descreption:- '+recevieduserMap["jobDescrebtion"],style: GoogleFonts.breeSerif(
textStyle: TextStyle(
fontSize: 20,wordSpacing: 1),),),
Text('Company Location:- '+recevieduserMap["companyLocation"],style: GoogleFonts.breeSerif(
textStyle: TextStyle(
fontSize: 20,wordSpacing: 1),),),
Text('Company Name:- '+recevieduserMap["companyName"],style: GoogleFonts.breeSerif(
textStyle: TextStyle(
fontSize: 20,wordSpacing: 1),),),
Text('\$${recevieduserMap["payrate"]}'.toString(),style: GoogleFonts.breeSerif(
textStyle: TextStyle(
fontSize: 20,wordSpacing: 1),)),
],
),
),
),
],
),
),
),
],
),
),
),
],
),
),
);
}
}
...

How to call a function from stateless Widget that points to state class function?

I am trying to create a responsive chatbot with quick replies. I want to make a button on pressed function call to another class's function. I tried using the callback. But i think i am doing something wrong. Kindly help me.
typedef void mycallback(String label);
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
User? user = FirebaseAuth.instance.currentUser;
UserModel loggedInUser = UserModel();
late DialogFlowtter dialogFlowtter;
final TextEditingController messageController = TextEditingController();
#override
void initState() {
super.initState();
DialogFlowtter.fromFile().then((instance) => dialogFlowtter = instance);
}
#override
Widget build(BuildContext context) {
var themeValue = MediaQuery.of(context).platformBrightness;
Body(
hi: sendMessage,
);
return Scaffold(
backgroundColor: themeValue == Brightness.dark
? HexColor('#262626')
: HexColor('#FFFFFF'),
appBar: AppBar(
//app bar ui
),
actions: [
//list if widget in appbar actions
PopupMenuButton(
icon: Icon(Icons.menu),
color: Colors.blue,
itemBuilder: (context) => [
PopupMenuItem<int>(
value: 0,
child: Text(
"Log out",
style: TextStyle(color: Colors.white),
),
),
],
onSelected: (item) => {logout(context)},
),
],
),
body: SafeArea(
child: Column(
children: [
Expanded(child: Body(messages: messages)),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
child: Row(
children: [
Expanded(
child: TextFormField(
controller: messageController,
style: TextStyle(
color: themeValue == Brightness.dark
? Colors.white
: Colors.black,
fontFamily: 'Poppins'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: themeValue == Brightness.dark
? Colors.white
: Colors.black),
borderRadius: BorderRadius.circular(15)),
hintStyle: TextStyle(
color: themeValue == Brightness.dark
? Colors.white54
: Colors.black54,
fontSize: 15,
fontStyle: FontStyle.italic,
),
labelStyle: TextStyle(
color: themeValue == Brightness.dark
? Colors.white
: Colors.black),
hintText: "Type here...",
),
),
),
IconButton(
color: themeValue == Brightness.dark
? Colors.white
: Colors.black,
icon: Icon(Icons.send),
onPressed: () {
sendMessage(messageController.text);
messageController.clear();
},
),
],
),
),
],
),
),
);
}
void sendMessage(String text) async {
if (text.isEmpty) return;
setState(() {
//do main function
});
}
}
The class from where i want to call the function
class Body extends StatelessWidget {
final List<Map<String, dynamic>> messages;
final mycallback? hi;
const Body({
Key? key,
this.messages = const [],
this.buttons = const [],
this.hi,
this.onPressed,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.separated(
itemBuilder: (context, i) {
var obj = messages[messages.length - 1 - i];
Message message = obj['message'];
bool isUserMessage = obj['isUserMessage'] ?? false;
String label = obj['label'];
return Row(
mainAxisAlignment:
isUserMessage ? MainAxisAlignment.end : MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
_MessageContainer(
message: message,
isUserMessage: isUserMessage,
),
ElevatedButton(
child: Text(label),
onPressed: () => {hi ?? (label)},//This is where i want to call
style: ElevatedButton.styleFrom(
primary: Colors.blueAccent,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
textStyle: TextStyle(fontWeight: FontWeight.bold)),
),
],
);
},
separatorBuilder: (_, i) => Container(height: 10),
itemCount: messages.length,
reverse: true,
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 20,
),
);
}
}
The code runs without errors but nothing happens when i press the buttons.
This is how I'd implement something like that. You're basically asking for a void as parameter inside your widget. Almost like a TextButton or another widget like that.
You can use this with two stateful widets as well, since you're borrowing the function from one to another.
Also I think this would be done better with provider so I suggest you look into it. (I don't have enough experience with it)
https://pub.dev/packages/provider
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int x = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('An app'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('$x'),
TestWidget(onTap: () {
setState(() {
x++;
});
})
],
),
),
);
}
}
class TestWidget extends StatelessWidget {
final VoidCallback onTap;
const TestWidget({Key? key, required this.onTap}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(20),
color: Colors.blue,
child: Text('test')),
);
}
}
I found the error.
In the class HomeScreen, I missed this line.
child: Body(
messages: messages,
hi: (text) => {sendMessage(text)}, //this line
)
After adding this line, the callback worked fine!

Send a parameter in main and use it in widget's build (Flutter dart)

I have a main.dart file. I want to create button section wigdet with Tapboxes. But every Tapbox have to have own value in it.
Widget buttonSection = Container(
child: Row(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Tapbox(5),
Tapbox(4),
],
),
Column(
children: [
Tapbox(12),
Tapbox(8),
],
),
),
);
This is my all tapbox wigdet file:
import 'package:flutter/material.dart';
class TapboxA extends StatefulWidget {
TapboxA({
Key key,
this.number1,
}) : super(key: key);
final number1;
#override
_TapboxAState createState() => _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {
bool _active = false;
void _handleTap() {
setState(() {
_active = !_active;
});
}
Widget build(BuildContext context) {
return GestureDetector(
onTap: _handleTap,
child: Container(
child: Center(
child: Text(
_active ? "Tapbox parameter value" : "Tapbox parameter value",
style: TextStyle(fontSize: 12.0, color: Colors.white),
),
),
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
color: _active ? Colors.lightGreen[700] : Colors.grey[600],
),
),
);
}
}
But when I get parameter in Tapbox, I can not access in state part. How can I fix this code.
use here model is list passing to next widget
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TaskDetailsPage(
detail: model,
),
),
);
to next page or widget
here asset is list you can write String getData;
class TaskDetailsPage extends StatefulWidget {
final Asset detail;
TaskDetailsPage({
Key key,
#required this.detail,
}) : super(key: key);
#override
_TaskDetailsPageState createState() => _TaskDetailsPageState();
}
and access is
Text(
widget.detail.title,
style: TextStyle(fontSize: 24),
),