A new Wikipedia search tool was created in Dart for Flutter, you may use it to search for anything. You can also get full page data with page id.
While researching this project I couldn’t find the person behind the development but I believe this person or team deserves to be mentioned here.
The project can be found on pub.dev.
https://pub.dev/packages/wikipedia
What is a Flutter Wikipedia Search Tool?
The Flutter Wikipedia Search Tool is a nicely created package that allows you to search Wikipedia by:
- Search by title
- Search full page data by page id
The output of the search is simple text without links or images. Maybe in the future, the author will upgrade this tool to display results with all images and links. But at this moment, I mean, the moment of writing, these options are not available yet.
This is an example of the simple output.
How to use the Flutter Wikipedia Search Tool?
First, add dependency into your project pubspec.yaml file and run flutter pub get.
dependencies:
wikipedia: ^0.0.3Now in your Dart code, you can use:
import 'package:wikipedia/wikipedia.dart';Next, we will initialize a few variables in your dart file.
late TextEditingController _controller;
bool _loading = false;
List<WikipediaSearch> _data = [];In our initState() we can define the default text which will be used in our search bar and we will call getLandingData(), our future.
@override
void initState() {
_controller = TextEditingController(text: "What is Flutter");
getLandingData();
super.initState();
}Future getLandingData()async{
try{
setState((){
_loading = true;
});
Wikipedia instance = Wikipedia();
var result = await instance.searchQuery(searchQuery: _controller.text,limit: 10);
setState((){
_loading = false;
_data = result!.query!.search!;
});
}catch(e){
print(e);
setState((){
_loading = false;
});
}
}The search bar will be in our appBar and placed inside the title.
appBar: AppBar(
backgroundColor: Colors.white,
title: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Search...",
suffixIcon: InkWell(
child: const Icon(Icons.search,color: Colors.black),
onTap: (){
getLandingData();
},
)
),
),
),Our output data will be presented to us in the ListView. Below is our ListView.builder.
ListView.builder(
itemCount: _data.length,
padding: const EdgeInsets.all(8),
itemBuilder: (context, index) => InkWell(
onTap: ()async{
Wikipedia instance = Wikipedia();
setState(() {
_loading = true;
});
var pageData = await instance.searchSummaryWithPageId(pageId: _data[index].pageid!);
setState(() {
_loading = false;
});
if(pageData==null){
const snackBar = SnackBar(
content: Text('Data Not Found'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}else{
showGeneralDialog(
context: context,
pageBuilder: (context, animation, secondaryAnimation) => Scaffold(
appBar: AppBar(
title: Text(_data[index].title!,style: const TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
iconTheme: const IconThemeData(color: Colors.black),
),
body: ListView(
padding: const EdgeInsets.all(10),
children: [
Text(pageData!.title!,style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
const SizedBox(height: 8),
Text(pageData.description!,style: const TextStyle(color: Colors.grey, fontStyle: FontStyle.italic),),
const SizedBox(height: 8),
Text(pageData.extract!)
],
),
),
);
}
},
child: Card(
elevation: 5,
margin: const EdgeInsets.all(8),
child: Padding(
padding: const EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(_data[index].title!,style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
const SizedBox(height: 10),
Text(_data[index].snippet!),
],
),
),
),
),
),The full code from the project page is below.
import 'package:flutter/material.dart';
import 'package:wikipedia/wikipedia.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Wikipedia Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late TextEditingController _controller;
bool _loading = false;
List<WikipediaSearch> _data = [];
@override
void initState() {
_controller = TextEditingController(text: "What is Flutter");
getLandingData();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Search...",
suffixIcon: InkWell(
child: const Icon(Icons.search,color: Colors.black),
onTap: (){
getLandingData();
},
)
),
),
),
body: Stack(
children: [
ListView.builder(
itemCount: _data.length,
padding: const EdgeInsets.all(8),
itemBuilder: (context, index) => InkWell(
onTap: ()async{
Wikipedia instance = Wikipedia();
setState(() {
_loading = true;
});
var pageData = await instance.searchSummaryWithPageId(pageId: _data[index].pageid!);
setState(() {
_loading = false;
});
if(pageData==null){
const snackBar = SnackBar(
content: Text('Data Not Found'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}else{
showGeneralDialog(
context: context,
pageBuilder: (context, animation, secondaryAnimation) => Scaffold(
appBar: AppBar(
title: Text(_data[index].title!,style: const TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
iconTheme: const IconThemeData(color: Colors.black),
),
body: ListView(
padding: const EdgeInsets.all(10),
children: [
Text(pageData!.title!,style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
const SizedBox(height: 8),
Text(pageData.description!,style: const TextStyle(color: Colors.grey, fontStyle: FontStyle.italic),),
const SizedBox(height: 8),
Text(pageData.extract!)
],
),
),
);
}
},
child: Card(
elevation: 5,
margin: const EdgeInsets.all(8),
child: Padding(
padding: const EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(_data[index].title!,style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
const SizedBox(height: 10),
Text(_data[index].snippet!),
],
),
),
),
),
),
Visibility(
visible: _loading,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: const Center(
child: CircularProgressIndicator(),
),
),
)
],
),
);
}
Future getLandingData()async{
try{
setState((){
_loading = true;
});
Wikipedia instance = Wikipedia();
var result = await instance.searchQuery(searchQuery: _controller.text,limit: 10);
setState((){
_loading = false;
_data = result!.query!.search!;
});
}catch(e){
print(e);
setState((){
_loading = false;
});
}
}
}Conclusion
The Wikipedia Search Tool is a very new project with plenty of space for improvements. I believe has a big potential with time and might become a big and widely used package.
