Location Wikipedia¶
|
Setup¶
Prerequisites¶
Build and Run¶
Navigate to the project folder for this example to build and run the application.
Note - the gem_kit directory containing the Maps SDK for Flutter
should be in the plugins directory of the example, e.g.
example_pathname/plugins/gem_kit - see the environment setup guide above.
Run: flutter pub get
Configure the native parts:
First, verify that the ANDROID_SDK_ROOT environment variable
is set to the root path of your android SDK.
In android/build.gradle add the maven block as shown,
within the allprojects block, for both debug and release builds:
allprojects {
repositories {
google()
mavenCentral()
maven {
url "${rootDir}/../plugins/gem_kit/android/build"
}
}
}
in android/app/build.gradle
within the android block, in the defaultConfig block,
the android SDK version minSdk must be set as shown below.
Additionally, for release builds, in android/app/build.gradle,
within the android block, add the buildTypes block as shown:
Replace example_pathname with the actual project pathname
android {
defaultConfig {
applicationId "com.magiclane.gem_kit.examples.example_pathname"
minSdk 21
targetSdk flutter.targetSdk
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
buildTypes {
release {
minifyEnabled false
shrinkResources false
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}
}
Then run the project:
flutter run --debugorflutter run --release
App entry and initialization¶
const projectApiToken = String.fromEnvironment('GEM_TOKEN');
void main() {
runApp(const MyApp());
}
This code initializes the projectApiToken with the required authorization token and launches the app.
How It Works¶
Main App Setup: The main app initializes GemKit and sets up the primary map screen.Wikipedia Integration: The app enables location-based Wikipedia searches, displaying title and content of selected landmarks.
User Interface¶
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Location Wikipedia',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
Main Screen with Wikipedia Integration¶
class _MyHomePageState extends State<MyHomePage> {
@override
void dispose() {
GemKit.release();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple[900],
title: const Text('Location Wikipedia', style: TextStyle(color: Colors.white)),
actions: [
IconButton(
onPressed: () => _onLocationWikipediaTap(context),
icon: Icon(Icons.search, color: Colors.white),
)
],
),
body: const GemMap(appAuthorization: projectApiToken),
);
}
void _onLocationWikipediaTap(BuildContext context) {
Navigator.of(context).push(MaterialPageRoute<dynamic>(
builder: (context) => const LocationWikipediaPage(),
));
}
}
This code sets up the main screen with a map and a search button for location-based Wikipedia information.
Wikipedia Data Display¶
The following code manages the Wikipedia data retrieval and display for the selected location.
class LocationWikipediaPage extends StatefulWidget {
const LocationWikipediaPage({super.key});
@override
State<LocationWikipediaPage> createState() => _LocationWikipediaPageState();
}
class _LocationWikipediaPageState extends State<LocationWikipediaPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
foregroundColor: Colors.white,
title: const Text("Location Wikipedia", style: TextStyle(color: Colors.white)),
backgroundColor: Colors.deepPurple[900],
),
body: FutureBuilder(
future: _getLocationWikipedia(),
builder: (context, snapshot) {
if (!snapshot.hasData || snapshot.data == null) {
return const Center(child: CircularProgressIndicator());
}
return Column(
mainAxisSize: MainAxisSize.max,
children: [
Text(
snapshot.data!.$1,
style: TextStyle(
overflow: TextOverflow.fade,
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: SingleChildScrollView(child: Text(snapshot.data!.$2)),
),
],
);
},
),
);
}
Future<(String, String)> _getLocationWikipedia() async {
final searchCompleter = Completer<List<Landmark>>();
SearchService.search("Statue of Liberty", Coordinates(latitude: 0.0, longitude: 0.0), (err, lmks) {
searchCompleter.complete(lmks);
});
final lmk = (await searchCompleter.future).first;
final completer = Completer<ExternalInfo?>();
ExternalInfo.getExternalInfo(
lmk,
onWikiDataAvailable: (externalInfo) => completer.complete(externalInfo),
);
final externalInfo = await completer.future;
final title = externalInfo!.getWikiPageTitle();
final content = externalInfo.getWikiPageDescription();
return (title, content);
}
}