Flutter - Create dynamic number of texteditingcontrollers - dynamic

I am recreating an app I have previously made in Swift, and on one of my pages we call an API and based on the results, we present the user a dynamic number of textfields to search by different search parameters.
Is there any good way to do this in Dart/Flutter? Since dart doesn't support generating code at runtime, is this even a possibility?

I just modified #Felix's answer with using Map to store TextEditingControllers instead of list. I think its easy to call textEditingControllers with key value pairs.
Modified code block;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "MyHomePage",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(
title: "MyHomePage",
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
var stringListReturnedFromApiCall = ["first", "second", "third", "fourth", "..."];
// This list of controllers can be used to set and get the text from/to the TextFields
Map<String,TextEditingController> textEditingControllers = {};
var textFields = <TextField>[];
stringListReturnedFromApiCall.forEach((str) {
var textEditingController = new TextEditingController(text: str);
textEditingControllers.putIfAbsent(str, ()=>textEditingController);
return textFields.add( TextField(controller: textEditingController));
});
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: new Column(
children:[
Column(children: textFields),
RaisedButton(
child: Text("Print Values"),
onPressed: (){
stringListReturnedFromApiCall.forEach((str){
print(textEditingControllers[str].text);
});
})
]
)));
}
}
when you write something to textfields and hit to print button results ;
flutter: first controller text
flutter: second controller text
flutter: third controller text
flutter: fourth controller text
flutter: so on .......

More or less as #Günter Zöchbauer mentioned, you can just build a list of widgets which are nested then in a container.
Here's a simple example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "MyHomePage",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(
title: "MyHomePage",
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
var stringListReturnedFromApiCall = ["first", "second", "third", "fourth", "..."];
// This list of controllers can be used to set and get the text from/to the TextFields
var textEditingControllers = <TextEditingController>[];
var textFields = <TextField>[];
stringListReturnedFromApiCall.forEach((str) {
var textEditingController = new TextEditingController(text: str);
textEditingControllers.add(textEditingController);
return textFields.add(new TextField(controller: textEditingController));
});
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: new Column(
children: textFields,
)));
}
}
Edit: Added list for TextEditingControllers to interact with all the TextFields

Using list of textEditingControllers instead of map
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var stringListReturnedFromApiCall = ["first", "second", "third", "fourth", "..."];
List<TextEditingController> textEditingControllers = [];
#override
void initState() {
super.initState();
stringListReturnedFromApiCall.forEach((String str) {
var textEditingController = TextEditingController(text: str);
textEditingControllers.add(textEditingController);
});
}
#override
void dispose() {
super.dispose();
// dispose textEditingControllers to prevent memory leaks
for (TextEditingController textEditingController in textEditingControllers) {
textEditingController?.dispose();
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: ListView.builder(
itemCount: stringListReturnedFromApiCall.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
controller: textEditingControllers[index],
),
);
},
),
);
}
}

list that contains your controllers
var myControllers = [];
function called in order to populate myControllers
createControllers() {
myControllers = [];
for (var i = 0; i < your_items.length; i++) {
myControllers.add(TextEditingController());
}
}
init createKeys in your statefullwidget
use it like this, for example in listview builder ;
TextField(
controller: myControllers[index],
),

May be this can help you or other's as well.
createFieldsList(context) {
thirdStepUserRegistration.value.forEach((key, value) { //// This line will loop all your data [ValueNotifier<Map<String, dynamic>> thirdStepUserRegistration]
if (!fieldsController.containsKey(key)) {
fieldsController[key] = TextEditingController(); //// This one will create you a list of controllers that u need for your fiels [Map<String, TextEditingController> fieldsController]
fieldsList.add( ////You will be creating a list of widget which is textfields [List<Widget> fieldsList]
Container(
height: 40.0,
margin: EdgeInsets.only(bottom: 10),
width: MediaQuery.of(context).size.width - 100,
child: PrimaryTextFormField( //This is my customize textfield you can create yours
controller: fieldsController[key],
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.words,
inputFormatters: textFormatter(),
hintText: value,
),
)
);
}
});
}
Column additionalDetails(BuildContext context) {
createFieldsList(context);
return Column( children: fieldsList );
}

Related

The method '[]' was called on null exception flutter

I am using an API call to get some data. And I am calling that method in the init state so that it fetches the data as soon as the widget is added into the tree.
I am using that data in a Text widget, but it shows an error that "The method '[]' was called on null".
Here is the code for your reference:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class Profile extends StatefulWidget {
final String username;
Profile({this.username});
#override
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
var data;
void getData() async {
http.Response response = await http
.get('http://codeforces.com/api/user.info?handles=${widget.username}');
if (response.statusCode == 200) {
data = jsonDecode(response.body);
} else {
print('Something went wrong.');
}
}
#override
void initState() {
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Text('Handle - ${widget.username}'),
Text(data['result'][0]['firstName']), /*This line causes error*/
],
),
),
);
}
}
The question is why the data field is null even though it is being called in the init state and the API call is also successful?
I have marked the line which gives the error using a comment.
I think it could be happen because in the time that the request are being done, your Profile widget was already rendered, and you're not using setState in your getData() function, so, the widget will not render again.
In this case, you can do some changes in your code:
Use a setState in your getData method
void getData() async {
http.Response response = await http
.get('http://codeforces.com/api/user.info?handles=${widget.username}');
if (response.statusCode == 200) {
setState(() {
data = jsonDecode(response.body);
});
} else {
print('Something went wrong.');
}
}
Set a default value to your Text widget
Text(data != null ? data['result'][0]['firstName'] : ''),
not the best and efficient solution but if you just want to show some data like username or email you can do it like this:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(Profile());
class Profile extends StatefulWidget {
final String username;
Profile({this.username});
#override
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
var email;
void getData() async {
http.Response response = await http.get(Uri.parse(
'http://codeforces.com/api/user.info?handles=${widget.username}'));
if (response.statusCode == 200) {
setState(() {
Map<String, dynamic> map = json.decode(response.body);
email = map['result'][0]['email'];
print(email);
});
} else {
print('Something went wrong.');
}
}
#override
void initState() {
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: email == null
? CircularProgressIndicator()
: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Handle - ${widget.username}'),
Text(email),
],
),
),
),
);
}
}
output:

State not changing in flutter for progress indicator [duplicate]

This question already has answers here:
What is a Future and how do I use it?
(6 answers)
Closed 2 years ago.
I am trying to parse an api in flutter. the asynchronous request delays the response which is shown by the progress indicator. but the progress indicator does not fade away after the response is fetched. it remains still on the screen.
how to change the state of the progress loader to listview.builder when the response is fetched?
this is my code.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'users.dart';
import 'package:http/http.dart' as http;
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool isLoading = false;
List<Users> _users;
Future<List<Users>> getUsers() async {
var response = await http.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
_users = usersFromJson(response.body);
isLoading = true;
}
#override
void initState() {
setState(() {
getUsers();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(isLoading ? "Parsed Json" : "Loading..."),
backgroundColor: Colors.deepPurple,
),
body: isLoading ? ListView.builder(
itemCount: _users.length,
itemBuilder: (BuildContext context,int index){
return ListTile(
leading: Image.network('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'),
title: Text(_users[index].name),
);
}) : Center(child: CircularProgressIndicator()),
);
}
}
Working code, try this
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool isLoading = false;
List<Users> _userList = [];
Future<void> getUsers() async {
isLoading = true;
var response = await http
.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
var jsonResponse = jsonDecode(response.body);
// print(jsonResponse);
jsonResponse.forEach((data) {
Users user = Users.fromMap(data);
print(user);
_userList.add(user);
});
isLoading = false;
}
#override
void initState() {
getUsers().then((value) => setState(() {}));
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(isLoading ? "Loading..." : "Parsed Json"),
backgroundColor: Colors.deepPurple,
),
body: isLoading
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: _userList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(_userList[index].name),
);
}));
}
}
class Users {
int id;
String name;
String username;
Users({
this.id,
this.name,
this.username,
});
Map<String, dynamic> toMap() {
return {
'id': id,
'name': name,
'username': username,
};
}
factory Users.fromMap(Map<String, dynamic> map) {
if (map == null) return null;
return Users(
id: map['id'],
name: map['name'],
username: map['username'],
);
}
String toJson() => json.encode(toMap());
factory Users.fromJson(String source) => Users.fromMap(json.decode(source));
#override
String toString() => 'Users(id: $id, name: $name, username: $username)';
}
Check your _user != null instead of bool then show list otherwise indicator
void initState () method Called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates. so there is no need for setState in initState() method.
try set setState after the response, so
#override
void initState() {
super.initState();
getUsers();
}
Future<List<Users>> getUsers() async {
isLoading = false;
var response = await http.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
_users = usersFromJson(response.body);
print(_users);
setState(() {
isLoading = true;
});
return _users;
}

Unable to fetch PDF file from Asset in Flutter, how can I fetch the PDF directly

I have attached the code. How can I fetch the PDF from assets? I think calling the init function could solve, but I couldn't call it perfect. I want to fetch the pdf without using any button or else something.
So, I need to fetch it directly as soon as the Class InformationTechnology call.
class InformationTechnology extends StatefulWidget {
#override
_InformationTechnologyState createState() => _InformationTechnologyState();
}
class InformationTechnology extends StatefulWidget {
#override
_InformationTechnologyState createState() => _InformationTechnologyState();
}
class _InformationTechnologyState extends State<InformationTechnology> {
String pdfasset = "assets/IT.pdf";
PDFDocument _doc;
bool _loading = false;
#override
void initState() {
super.initState();
}
_initPDF()async{
setState(() {
_loading = true;
});
final doc = await PDFDocument.fromAsset(pdfasset);
setState(() {
_doc = doc;
_loading = false;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Introduction to Information Technology"),
centerTitle: true,
backgroundColor: Colors.blueAccent,
),
body: _loading?
Center(
child: CircularProgressIndicator(),
):PDFViewer(document: _doc),
);
}
}

How passing widget dynamically in class constructor parameter

This is my first question in Stackoverflow.
I'm trying to call a widget in another StatefulWidget when we passing it as class constuctor parameter.
So i have this custom widget :
class MyTextWidget extends StatelessWidget {
final String text;
MyTextWidget({ #required this.text });
#override
Widget build(BuildContext context) {
return Text(this.text);
}
}
i want to use in another widget like this (with pass in class constructor parameter)
import 'package:myproject/MyTextWidget.dart';
.
.
.
// Passing widget like this
child: Example(display: MyTextWidget,text: this.widget.text);
.
.
.
// And use this widget like this
this.widget.display(text: this.widget.text);
this is my first code :
class Example extends StatefulWidget {
final Widget display;
final String text;
Example({ #required this.display, #required this.text });
#override
State<StatefulWidget> createState() {
return ExampleState();
}
}
class ExampleState extends State<Example> {
#override
Widget build(BuildContext context) {
return this.widget.display(text: this.widget.text); // here we have error
}
}
but i have this error
The expression doesn't evaluate to a function, so it can't be invoked.dart(invocation_of_non_function_expression)
I realize i need to make a typedef for this problem so i improve code like this:
typedef Widget DisplayType({ #required String text });
class Example extends StatefulWidget {
final DisplayType display;
final String text;
Example({ #required this.display, #required this.text });
#override
State<StatefulWidget> createState() {
return ExampleState();
}
}
class ExampleState extends State<Example> {
#override
Widget build(BuildContext context) {
return this.widget.display(text: this.widget.text);
}
}
Our error is fixed but when i want to pass MyTextWidget in another widget:
child: Example(display: MyTextWidget,text: this.widget.text);
Finally i get this error:
The argument type 'Type' can't be assigned to the parameter type 'Widget Function({String text})'.dart(argument_type_not_assignable)
how can i fix this problem?
I think you want display to be a builder function that returns a MyTextWidget.
import 'package:flutter/material.dart';
Future<void> main() async {
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(final BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(final BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Home")),
body: Center(
child: Example(
display: ({#required final String text}) {
assert(text != null);
return MyTextWidget(text: text);
},
text: "some text",
),
),
);
}
}
class MyTextWidget extends StatelessWidget {
final String text;
MyTextWidget({#required this.text}) : assert(text != null);
#override
Widget build(final BuildContext context) {
return Text(this.text);
}
}
typedef Widget DisplayType({#required final String text});
class Example extends StatefulWidget {
final DisplayType display;
final String text;
Example({
#required this.display,
#required this.text,
}) : assert(display != null),
assert(text != null);
#override
State<StatefulWidget> createState() {
return ExampleState();
}
}
class ExampleState extends State<Example> {
#override
Widget build(final BuildContext context) {
return this.widget.display(text: this.widget.text);
}
}
You don't need to pass the down the widget, just import it in the class that you want to use it.
When you want to instantiate it, you need to use parenthesis MyTextWidget().
You don't need to use this when calling the parameters passed to a Stateful Widget, just widget.text will work.
You seem to be having some misunderstandings about Flutter. There are very rare occasions where you need to use this.

pass data over the tree flutter

I search a simple solution to pass simple string variable over the tree widget, inherite function is to complicated to me.
to resume :
I tried to pass data to page 1 to body of page 2
class page1 extends StatefulWidget
string textvariable
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new page2(
textvariable: this,
)),
);
},
in my next page I have a StatelessWidget
class page2 extends StatelessWidget {
var textvariable;
page2({this.textvariable});
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: const Text("Localisation")),
body: testwidget (textvariable),
);
}
}
I try to passe textvariable in the widget 3 who is a stateful
class testwidget extends StatefulWidget
...
new Text(
"$textvariable",
),