I've implemented this code to show a list of json data from a web url.
I've tried to implement a simple pull to refresh, but nothing works.
Flutter code is long, but it's pretty simple actually. It has main classes of flutter, and a future method to load json data from web.
I just want to implement a simple pull to refresh.
What am I missing here?
Why is it not working?
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:pull_to_refresh/pull_to_refresh.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'XXX',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'XXX'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final RefreshController _refreshController = RefreshController();
Future<List<User>> _getUsers() async {
var data = await http.get("xxxxxxxxxxxxx");
if (data.statusCode == 200) {
print('Status Code 200: Ok!');
var jsonData = json.decode(data.body);
List<User> users = [];
for (var k in jsonData.keys) {
var u = jsonData[k];
//print(u["pubdate"]);
User user = User(u["id"], u["source"], u["desc"], u["link"], u["title"], u["img"], u["pubdate"]);
users.add(user);
}
print(users.length);
return users;
} else {
throw Exception('Failed to load json');
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SmartRefresher(
controller: _refreshController,
enablePullDown: true,
header: WaterDropHeader(),
onRefresh: () async {
await Future.delayed(Duration(seconds: 1));
_refreshController.refreshCompleted();
},
child: FutureBuilder(
future: _getUsers(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.data == null){
return Container(
child: Center(
child: Text("Loading..."),
),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int id){
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
snapshot.data[id].img
),
),
title: Text(snapshot.data[id].title),
subtitle: Column(
children: <Widget>[
Row(
children: [
Text(
snapshot.data[id].source,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
Spacer(),
Text(snapshot.data[id].pubdate),
],
),
],
)
);
},
);
}
},
),
),
);
}
}
class User {
final int id;
final String source;
final String desc;
final String link;
final String title;
final String img;
final String pubdate;
User(this.id, this.source, this.desc, this.link, this.title, this.img, this.pubdate);
}
Solved!
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'XXXX',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'XXXXXX'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Funcao para buscar as noticias
Future<List<User>> _getUsers() async {
var data = await http.get("XXXXX");
if (data.statusCode == 200) {
print('Status Code 200: Ok!');
var jsonData = json.decode(data.body);
List<User> users = [];
for (var k in jsonData.keys) {
var u = jsonData[k];
//print(u["pubdate"]);
User user = User(u["id"], u["source"], u["desc"], u["link"], u["title"], u["img"], u["pubdate"]);
users.add(user);
}
print(users.length);
return users;
} else {
throw Exception('Failed to load json');
}
}
var refreshKey = GlobalKey<RefreshIndicatorState>();
#override
void initState() {
super.initState();
refreshList();
}
Future<Null> refreshList() async {
refreshKey.currentState?.show(atTop: false);
await Future.delayed(Duration(seconds: 2));
setState(() {
_getUsers();
});
return null;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: RefreshIndicator(
key: refreshKey,
child: FutureBuilder(
future: _getUsers(),
builder: (BuildContext context, AsyncSnapshot snapshot){
if(snapshot.data == null){
return Center(
child: CircularProgressIndicator(),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int id){
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
snapshot.data[id].img
),
),
title: Text(snapshot.data[id].title),
subtitle: Column(
children: <Widget>[
Row(
children: [
Text(
snapshot.data[id].source,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
Spacer(),
Text(snapshot.data[id].pubdate),
],
),
],
)
);
},
);
}
},
),
onRefresh: refreshList,
),
);
}
}
class User {
final int id;
final String source;
final String desc;
final String link;
final String title;
final String img;
final String pubdate;
User(this.id, this.source, this.desc, this.link, this.title, this.img, this.pubdate);
}
You have to get users on onLoading as shown below
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SmartRefresher(
....
onLoading: _getUsers,
.....
)
}
Related
I have a problem with parsed JSON in Flutter-Dart. Actually, there is no problem, but there is a method which I don't know. I'm getting data from a PHP server and I'm writing to listview from parsed JSON. However, I don't want to write to a listview, I just want to get data from the parsed JSON because I will set an another textview from parsed json data which I get.
This is my code.
import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<List<Photo>> fetchPhotos(http.Client client) async {
final response =
await client.get(Uri.parse('https://meshcurrent.online/get_20word.php'));
// Use the compute function to run parsePhotos in a separate isolate.
return compute(parsePhotos, response.body);
}
// A function that converts a response body into a List<Photo>.
List<Photo> parsePhotos(String responseBody) {
final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
return parsed.map<Photo>((json) => Photo.fromJson(json)).toList();
}
class Photo {
final String questId;
final String quest;
final String ans1;
final String ans2;
final String ans3;
final String ans4;
final String correctAns;
final String category;
const Photo({
required this.questId,
required this.quest,
required this.ans1,
required this.ans2,
required this.ans3,
required this.ans4,
required this.correctAns,
required this.category,
});
factory Photo.fromJson(Map<String, dynamic> json) {
return Photo(
questId: json['questId'] as String,
quest: json['quest'] as String,
ans1: json['ans1'] as String,
ans2: json['ans2'] as String,
ans3: json['ans3'] as String,
ans4: json['ans4'] as String,
correctAns: json['correctAns'] as String,
category: json['category'] as String,
);
}
}
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
const appTitle = 'Isolate Demo';
return const MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(children: [
Text("ronalddo"),
Text("mecsfsi"),
FutureBuilder<List<Photo>>(
future: fetchPhotos(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) {
return const Center(
child: Text('An error has occurred!'),
);
} else if (snapshot.hasData) {
return PhotosList(photos: snapshot.data!);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
),
]));
}
}
class PhotosList extends StatelessWidget {
const PhotosList({Key? key, required this.photos}) : super(key: key);
final List<Photo> photos;
#override
Widget build(BuildContext context) {
return ListView.builder(
padding: EdgeInsets.all(20),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: photos.length,
itemBuilder: (context, index) {
return ListTile(
title: Row(
children: [
Text(photos[index].quest),
Text(photos[index].ans1),
],
),
);
});
}
}
I want to do get only first column and get only questId from this parsed JSON. And I will set a textview using Getx library. I know set a data with Getx library but I can't do it because I don't know get the data.
If you just want to get the first questId of the List, do
photos[0].questId;
I am trying to read a local json file named "catalog.json" I wrote all the nessessary codes but it's showing this error "lateinitializationError: Field 'catalogdata' has not been initialized."
then i tried by initializing the 'catalogdata' variable but then it shows that 'catalogdata' variable is empty . I dont know how to solve it . Please help me.
my code
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart';
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
#override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
late List catalogdata;
Future<String> loadData() async {
var data = await rootBundle.loadString("assets/images/files/catalog.json");
setState(() {
catalogdata = json.decode(data);
});
return "success";
}
#override
void initState() {
// TODO: implement initState
this.loadData();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Homepage"),
),
body: Center(
child: Text(
catalogdata[0],
style: TextStyle(fontSize: 20),
),
),
);
}
}
Here’s sample.json:
{
"items": [
{
"id": "p1",
"name": "Item 1",
"description": "Description 1"
},
{
"id": "p2",
"name": "Item 2",
"description": "Description 2"
},
{
"id": "p3",
"name": "Item 3",
"description": "Description 3"
}
]
}
The code which is used to fetch data from the JSON file (see the full code below):
Future<void> readJson() async {
final String response = await rootBundle.loadString('assets/sample.json');
final data = await json.decode(response);
// ...
}
Declare the json file in the assets section in your pubspec.yaml file:
flutter:
assets:
- assets/sample.json
main.dart
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _items = [];
// Fetch content from the json file
Future<void> readJson() async {
final String response = await rootBundle.loadString('assets/sample.json');
final data = await json.decode(response);
setState(() {
_items = data["items"];
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
'Kindacode.com',
),
),
body: Padding(
padding: const EdgeInsets.all(25),
child: Column(
children: [
ElevatedButton(
child: const Text('Load Data'),
onPressed: readJson,
),
// Display the data loaded from sample.json
_items.isNotEmpty
? Expanded(
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return Card(
margin: const EdgeInsets.all(10),
child: ListTile(
leading: Text(_items[index]["id"]),
title: Text(_items[index]["name"]),
subtitle: Text(_items[index]["description"]),
),
);
},
),
)
: Container()
],
),
),
);
}
}
it's showing this error "lateinitializationError: Field 'catalogdata'
has not been initialized." then I tried by initializing the
'catalogdata'
While using late before variables make sure that, the variable must be initialized later. Otherwise, you can encounter a runtime error when the variable is used.
If you didn't add the correct location catalog.json in pubsec.yaml your variable catalog didn't gets the correct value so the late variable is not initialized.
So you must add asset path in pubsec.yaml
assets:
- assets/
- assets/images/files/catalog.json
Another case here is JSON.decode() return map<string,dynamic> value here you set list.maybe that also cause the problem and not initialised.
instead of this late List catalogdata; use this late var catalogdata; or late Map<string,dynamic> catalogdata;
Sample Code
Catalog.json
{
"name": "lava",
"Catagory": "man"
}
Main.dart
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class AppRoutes {
static String detail = "/Detail";
static String Page2 = "/FilterBeacon";
static String Page1 = "/FilterPoint";
static String home = "/";
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// key: constItem.navigatorKey,
initialRoute: "/",
routes: {
AppRoutes.home: (context) => Home(),
},
title: _title,
// home: ,
);
}
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
State<Home> createState() => _HomeState();
}
var _index = 0;
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
#override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
late var catalogdata;
Future<String> loadDatas() async {
var data = await rootBundle.loadString("assets/images/files/catalog.json");
// setState(() {
catalogdata = json.decode(data);
// });
return "success";
}
Future<String> loadData() async {
var data = await rootBundle.loadString("assets/images/files/catalog.json");
setState(() {
catalogdata = json.decode(data);
});
return "success";
}
#override
void initState() {
loadData();
// loadData().then((value) => catalogdata=value);
} // String jsons = "";
// #override
// Future<void> initState() async {
// super.initState();
// await loadData();
// }
#override
Widget build(BuildContext context) {
var futureBuilder = FutureBuilder(
future: loadData(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting)
return Center(child: CircularProgressIndicator());
else if (snapshot.connectionState == ConnectionState.done)
return Center(
child: Text(
catalogdata.toString(),
style: TextStyle(),
),
);
else
return Container();
});
return Scaffold(
appBar: AppBar(
title: Text("Homepage"),
),
body: Center(
child: Text(
catalogdata.toString(),
style: TextStyle(),
),
),
);
}
}
I'm newbie, just how get variable value from this extends StatelessWidget in a flutter_deep_linking-master / multi level project using plugin URL launcher
how get the variable value of ${person.pdf} and insert it in String link = variable;
and put this new variable in onClicked: () => Utils.openLink(url: link),
class PersonPage extends StatelessWidget {
final Family family;
final Person person;
const PersonPage({required this.family, required this.person, Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text(person.name)), body:
Text('\n\n' ' Le manuel recherché du ${family.name} ${person.name} est ici : \n\n'
' => **${person.pdf}** \n\n'));
}
//get the variable value of ${person.pdf} and insert it in : String link = => variable_value;
String link = variable_value;
class PersonPage extends StatelessWidget {
final Family family;
final Person person;
const PersonPage({required this.family, required this.person, Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text(person.name)), body:
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildButton(
text: 'Lien fichier pdf',
//put this new variable in : (url: link),
onClicked: () => Utils.openLink(url: =>link),
),
],
),
),
);
Widget buildButton({
required String text,
required VoidCallback onClicked,
}) =>
Container(
padding: const EdgeInsets.symmetric(vertical: 12),
child: ElevatedButton(
onPressed: onClicked,
child: Text(
text,
style: TextStyle(fontSize: 24),
),
),
);
}
class Four04Page extends StatelessWidget {
final String message;
const Four04Page({required this.message, Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text('Page Not Found')),
body: Center(child: Text(message)),
);
}
'thanks'
i have a class that call it in main class but i want pass a function to sub class and run function to sub class and return response of function to main class how to do in flutter dart.
Do
class subclassName
final function NameOfFunction;
subclassName(this.NameOfFunction);
in main class
subclassName(the function you want to pass);
main
class _MyAppState extends State<MyApp> {
var _questionIndex = 0;
void _answerQuestion() {
setState(() {
_questionIndex = _questionIndex + 1;
});
print(_questionIndex);
}
#override
Widget build(BuildContext context) {
print("object");
var questions = [
{
'questionText':'What\'s your favorite color?',
'answers': ['Black','Red','Green','White'],
},
{
'questionText':'What\'s your favorite animal?',
'answers': ['Rabbit','Snak','Elephant','Lion'],
},
{
'questionText':'who\'s your favorite instructor?',
'answers': ['suhaib','max','khalid','moh'],
}
];
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body: Column(
children: [
Question(
questions[_questionIndex]['questionText'],
),
...(questions[_questionIndex]['answers'] as List<String>).map((answer){
return Answer(_answerQuestion, answer);
}).toList(),
],
),
),
);
}
}
sub class
class Answer extends StatelessWidget {
final String textanswer;
final Function answerQuestion;
Answer(this.answerQuestion,this.textanswer);
#override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(textanswer),
onPressed: answerQuestion,
),
);
}
}
hello I try to use google map plugin for flutter https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter
I use this exemple
https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter/example/lib
but in this exemple there is some page. In my application I need only one map at the launch on the app. Problem, with this exemple I didn't manage to use it at my convenience. So I try to use the minimalist example of the read.me but it's a statlesswidget, and I and can't integer Tag fonction or the map_ui.dart like the complet example. So I tried to pass this stateless in statefull but when I do this I have an error
here is what I tried to compile from the two example
exemple 1 https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter
void main() {
GoogleMapController.init();
final GoogleMapOverlayController controller =
GoogleMapOverlayController.fromSize(width: 300.0, height: 200.0);
final Widget mapWidget = GoogleMapOverlay(controller: controller);
runApp(MaterialApp(
home: new Scaffold(
appBar: AppBar(title: const Text('Google Maps demo')),
body: MapUiBody(mapWidget, controller.mapController),
),
navigatorObservers: <NavigatorObserver>[controller.overlayController],
));
}
exemple 2
https://github.com/flutter/plugins/blob/master/packages/google_maps_flutter/example/lib/map_ui.dart
class MapUiBody extends StatefulWidget {
final GoogleMapOverlayController controller;
const MapUiBody(this.controller, GoogleMapController mapController);
#override
State<StatefulWidget> createState() =>
MapUiBodyState(controller.mapController);
}
class MapUiBodyState extends State<MapUiBody> {
MapUiBodyState(this.mapController);
final GoogleMapController mapController;
#override
Widget build(BuildContext context) {
return Column(
);
}
}
with this, I have an error
body: MapUiBody(mapWidget, controller.mapController),
mapWidget: the argument type Widget can't be assigned to the parameter type 'GooglemapoverlayController'
You have
final GoogleMapOverlayController controller;
const MapUiBody(this.controller, GoogleMapController mapController);
where you pass
final GoogleMapOverlayController controller =
GoogleMapOverlayController.fromSize(width: 300.0, height: 200.0);
final Widget mapWidget = GoogleMapOverlay(controller: controller);
...
body: MapUiBody(mapWidget, controller.mapController),
where mapWidget is passed to final GoogleMapOverlayController controller; which is not a Widget.
controller.mapController is probably a GoogleMapController as expected by const MapUiBody(..., GoogleMapController mapController);
but it seems redundant to pass that because you can get it from controller passed to mapWidget anyway.
It's not clear from your code what your intentions are.
Why do you want to pass mapWidget? What should happen with it in MapUiBody?
I succeeded to display map on home page but I can't move the map ..
void main() {
GoogleMapController.init();
final GoogleMapOverlayController controller =
GoogleMapOverlayController.fromSize(width: 300.0, height: 200.0);
final Widget mapWidget = GoogleMapOverlay(controller: controller);
runApp(MaterialApp(
home: new Scaffold(
appBar: AppBar(title: const Text('Google Maps demo')),
body: MapsDemo(mapWidget, controller.mapController),
),
));
}
class MapsDemo extends StatelessWidget {
MapsDemo(this.mapWidget, this.controller);
final Widget mapWidget;
final GoogleMapController controller;
#override
final GoogleMapOverlayController mapController =
GoogleMapOverlayController.fromSize(
width: 300.0,
height: 200.0,
options: GoogleMapOptions(
cameraPosition: const CameraPosition(
target: LatLng(-33.852, 151.211),
zoom: 11.0,
),
trackCameraPosition: true,
),
);
#override
Widget build(BuildContext context) {
return MapUiBody(mapController);
}
}
class MapUiBody extends StatefulWidget {
final GoogleMapOverlayController controller;
const MapUiBody(this.controller);
#override
State<StatefulWidget> createState() =>
MapUiBodyState(controller.mapController);
}
class MapUiBodyState extends State<MapUiBody> {
MapUiBodyState(this.mapController);
final GoogleMapController mapController;
GoogleMapOptions _options;
#override
void initState() {
super.initState();
mapController.addListener(_onMapChanged);
_extractMapInfo();
}
void _onMapChanged() {
setState(() {
_extractMapInfo();
});
}
void _extractMapInfo() {
_options = mapController.options;
}
#override
void dispose() {
mapController.removeListener(_onMapChanged);
super.dispose();
}
Widget _mapTypeCycler() {
final MapType nextType =
MapType.values[(_options.mapType.index + 1) % MapType.values.length];
return FlatButton(
child: Text('change map type to $nextType'),
onPressed: () {
mapController.updateMapOptions(
GoogleMapOptions(mapType: nextType),
);
},
);
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: GoogleMapOverlay(controller: widget.controller),
),
),
Column(
children: <Widget>[
_mapTypeCycler(),
],
),
],
);
}
}