**main.dart**
import 'package:flutter/material.dart';
import 'package:world_time/pages/choose_location.dart';
import 'package:world_time/pages/home.dart';
import 'package:world_time/pages/loading.dart';
void main() => runApp(MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => Loading(),
'/home': (context) => Home(),
'/location': (context) => ChooseLocation(),
},
));
**home.dart**
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
Map data = {};
@override
Widget build(BuildContext context) {
data = data.isNotEmpty ? data : ModalRoute.of(context).settings.arguments;
print(data);
// set background
String bgImage = data['isDaytime'] ? 'day.png' : 'night.png';
Color bgColor = data['isDaytime'] ? Colors.blue : Colors.indigo[700];
return Scaffold(
backgroundColor: bgColor,
body: SafeArea(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/$bgImage'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 120.0, 0, 0),
child: Column(
children: <Widget>[
FlatButton.icon(
onPressed: () async {
dynamic result =
await Navigator.pushNamed(context, '/location');
setState(() {
data = {
'time': result['time'],
'result': result['location'],
'isDaytime': result['isDaytime'],
'flag': result['flag'],
};
});
},
icon: Icon(
Icons.edit_location,
color: Colors.grey[300],
),
label: Text(
'Edit Location',
style: TextStyle(
color: Colors.grey[300],
),
),
),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
data['location'] ?? '',
style: TextStyle(
fontSize: 38.0,
letterSpacing: 2.0,
color: Colors.white,
),
),
],
),
SizedBox(height: 20.0),
Text(
data['time'] ?? '',
style: TextStyle(
fontSize: 66.0,
color: Colors.white,
),
),
],
),
),
),
),
);
}
}
**choose_location.dart**
import 'package:flutter/material.dart';
import 'package:world_time/services/world_time.dart';
class ChooseLocation extends StatefulWidget {
@override
_ChooseLocationState createState() => _ChooseLocationState();
}
class _ChooseLocationState extends State<ChooseLocation> {
List<WorldTime> locations = [
WorldTime(url: 'Europe/London', location: 'London', flag: 'uk.png'),
WorldTime(url: 'Europe/Berlin', location: 'Athens', flag: 'greece.png'),
WorldTime(url: 'Africa/Cairo', location: 'Cairo', flag: 'egypt.png'),
WorldTime(url: 'Africa/Nairobi', location: 'Nairobi', flag: 'kenya.png'),
WorldTime(url: 'America/Chicago', location: 'Chicago', flag: 'usa.png'),
WorldTime(url: 'America/New_York', location: 'New York', flag: 'usa.png'),
WorldTime(url: 'Asia/Seoul', location: 'Seoul', flag: 'south_korea.png'),
WorldTime(url: 'Asia/Jakarta', location: 'Jakarta', flag: 'indonesia.png'),
];
void updateTime(index) async {
WorldTime instance = locations[index];
await instance.getTime();
// navigate to home screen
Navigator.pop(context, {
'location': instance.location,
'flag': instance.flag,
'time': instance.time,
'isDaytime': instance.isDaytime,
});
}
@override
Widget build(BuildContext context) {
print('build function ran');
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text('Choose a Location'),
centerTitle: true,
elevation: 0,
),
body: ListView.builder(
itemCount: locations.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
child: Card(
child: ListTile(
onTap: () {
updateTime(index);
},
title: Text(locations[index].location),
leading: CircleAvatar(
backgroundImage:
AssetImage('assets/${locations[index].flag}'),
),
),
),
);
},
),
);
}
}
**loading.dart**
import 'package:flutter/material.dart';
import 'package:world_time/services/world_time.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class Loading extends StatefulWidget {
@override
_LoadingState createState() => _LoadingState();
}
class _LoadingState extends State<Loading> {
void setupWorldTime() async {
WorldTime instance = WorldTime(
location: 'Berlin', flag: 'germany.png', url: 'Europe/Berlin');
await instance.getTime();
Navigator.pushReplacementNamed(context, '/home', arguments: {
'location': instance.location,
'flag': instance.flag,
'time': instance.time,
'isDaytime': instance.isDaytime,
});
}
@override
void initState() {
super.initState();
setupWorldTime();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[900],
body: Center(
child: SpinKitFadingCircle(
color: Colors.white,
size: 50.0,
),
),
);
}
}
**world_time.dart**
import 'package:http/http.dart';
import 'dart:convert';
import 'package:intl/intl.dart';
class WorldTime {
String location; // location name for the UI
String time; //the time in that location
String flag; //url to an asset flag icon
String url; //location url for api endpoint
bool isDaytime; //true or false if daytime or not
WorldTime({this.location, this.flag, this.url});
Future<void> getTime() async {
//make the request
Response response =
await get(Uri.parse('https://worldtimeapi.org/api/timezone/$url'));
Map data = jsonDecode(response.body);
//print(data);
//get properties from data
String datetime = data['datetime'];
String offset = data['utc_offset'].substring(1, 3);
//print(datetime);
//print(offset);
//create DateTime object
DateTime now = DateTime.parse(datetime);
now = now.add(Duration(hours: int.parse(offset)));
//set the time property
isDaytime = now.hour > 6 && now.hour < 20 ? true : false;
time = DateFormat.jm().format(now);
}
}
WorldTime instance =
WorldTime(location: 'Berlin', flag: 'germany.png', url: 'Europe/Berlin');
Here are my codes for building a World time app on flutter
No error message seen on the output, but when a new city or location is selected, It displays only the time on the device without displaying the corresponding city for the current time displayed on the screen. Please how can I fix this without blowing up my codes. Thanks
On your flatbutton onpressed you have set the location key to 'result' change it to 'location'.
FlatButton.icon(
onPressed: () async {
dynamic result =
await Navigator.pushNamed(context, '/location');
setState(() {
data = {
'time': result['time'],
// Change This
>>> 'result': result['location'], <<<
// To This
>>> 'location': result['location'], <<<
'isDaytime': result['isDaytime'],
'flag': result['flag'],
};
});
},