Technetium 101: Flutter Packages
1. path 1.8.0
A comprehensive, cross-platform path manipulation library for Dart.
The path package provides common operations for manipulating paths: joining, splitting, normalizing, etc.
We've tried very hard to make this library do the "right" thing on whatever platform you run it on, including in the browser. When you use the top-level functions, it will assume the current platform's path style and work with that. If you want to explicitly work with paths of a specific style, you can construct a p.Context for that style.
Usage:
The path library was designed to be imported with a prefix, though you don't have to if you don't want to:
import 'package:path/path.dart' as p;The most common way to use the library is through the top-level functions. These manipulate path strings based on your current working directory and the path style (POSIX, Windows, or URLs) of the host platform. For example:
p.join('directory', 'file.txt');This calls the top-level join() function to join "directory" and "file.txt" using the current platform's directory separator.
If you want to work with paths for a specific platform regardless of the underlying platform that the program is running on, you can create a Context and give it an explicit [Style]:
var context = p.Context(style: Style.windows);
context.join('directory', 'file.txt');Example:
import 'package:path/path.dart' as p;
void main() {
print('Current path style: ${p.style}');
print('Current process path: ${p.current}');
print('Separators');
for (var entry in [p.posix, p.windows, p.url]) {
print(' ${entry.style.toString().padRight(7)}: ${entry.separator}');
}
}2. flutter_dotenv 5.0.0
Load configuration at runtime from a .env file which can be used throughout the application.
This library is a fork of mockturtl/dotenv dart library, initially with slight changes to make it work with flutter.
An environment is the set of variables known to a process (say, PATH, PORT, ...). It is desirable to mimic the production environment during development (testing, staging, ...) by reading these values from a file.
This library parses that file and merges its values with the built-in Platform.environment map.
Usage:
Create a .env file in the root of your project with the example content:
FOO=foo
BAR=bar
FOOBAR=$FOO$BAR
ESCAPED_DOLLAR_SIGN='$1000'Note: If deploying to web server, ensure that the config file is uploaded and not ignored. (Whitelist the config file on the server, or name the config file without a leading .)
Add the .env file to your assets bundle in pubspec.yaml. Ensure that the path corresponds to the location of the .env file!
assets:
- .envRemember to add the .env file as an entry in your .gitignore if it isn't already unless you want it included in your version control.
*.envLoad the .env file in main.dart. Note that flutter_dotenv >=5.0.0 has a slightly different syntax for consuming the DotEnv data.
Example:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
Future main() async {
await dotenv.load(fileName: "assets/.env", mergeWith: {
'TEST_VAR': '5',
}); // mergeWith optional, you can include Platform.environment for Mobile/Desktop app
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Dotenv Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Dotenv Demo'),
),
body: SingleChildScrollView(
child: FutureBuilder<String>(
future: rootBundle.loadString('assets/.env'),
initialData: '',
builder: (context, snapshot) => Container(
padding: EdgeInsets.all(50),
child: Column(
children: [
Text(
'Env map: ${dotenv.env.toString()}',
),
Divider(thickness: 5),
Text('Original'),
Divider(),
Text(snapshot.data ?? ''),
],
),
),
),
),
),
);
}3. device_info_plus 2.1.0
Get current device information from within the Flutter application.
The package providing detailed information about the device (make, model, etc.), and Android or iOS version the app is running on.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Usage:
Import package:device_info_plus/device_info_plus.dart, instantiate DeviceInfoPlugin and use the Android and iOS, Web getters to get platform-specific device information.
import 'package:device_info_plus/device_info_plus.dart';
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
print('Running on ${androidInfo.model}'); // e.g. "Moto G (4)"
IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
print('Running on ${iosInfo.utsname.machine}'); // e.g. "iPod7,1"
WebBrowserInfo webBrowserInfo = await deviceInfo.webBrowserInfo;
print('Running on ${webBrowserInfo.userAgent}'); // e.g. "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"4. lottie 1.1.0
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Usage:
Simple animation
This example shows how to display a Lottie animation in the simplest way.
The Lottie widget will load the json file and run the animation indefinitely.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),
// Load a Lottie file from a remote url
Lottie.network(
'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),
],
),
),
);
}
}Control the size of the Widget
The Lottie widget takes the same arguments and have the same behavior as the Image widget in term of controlling its size.
Lottie.asset(
'assets/LottieLogo1.json',
width: 200,
height: 200,
fit: BoxFit.fill,
)Example:
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),
// Load a Lottie file from a remote url
Lottie.network(
'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),
],
),
),
);
}
}5. carousel_slider: 4.0.0
A carousel slider widget, support infinite scroll and custom child widget.
The path package provides features such as
- Infinite scroll
- Custom child widgets
- Auto play
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Live preview
https://serenader2014.github.io/flutter_carousel_slider/#/
Note: this page is built with flutter-web. For a better user experience, please use a mobile device to open this link.
Installation :
Add carousel_slider: ^4.0.0 to your pubspec.yaml dependencies. And import it:
import 'package:carousel_slider/carousel_slider.dart';How to use:
Simply create a CarouselSlider widget, and pass the required params:
CarouselSlider(
options: CarouselOptions(height: 400.0),
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text('text $i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
)Params :
CarouselSlider(
items: items,
options: CarouselOptions(
height: 400,
aspectRatio: 16/9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
onPageChanged: callbackFunction,
scrollDirection: Axis.horizontal,
)
)Since v2.0.0, you'll need to pass the options to CarouselOptions. For each option's usage you can refer to carousel_options.dart.
If you pass the height parameter, the aspectRatio parameter will be ignored.
Build item widgets on demand:
This method will save memory by building items once it becomes necessary. This way they won't be built if they're not currently meant to be visible on screen. It can be used to build different child item widgets related to content or by item index.
CarouselSlider.builder(
itemCount: 15,
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
Container(
child: Text(itemIndex.toString()),
),
)Carousel controller:
In order to manually control the pageview's position, you can create your own CarouselController, and pass it to CarouselSlider. Then you can use the CarouselController instance to manipulate the position.
class CarouselDemo extends StatelessWidget {
CarouselController buttonCarouselController = CarouselController();
@override
Widget build(BuildContext context) => Column(
children: <Widget>[
CarouselSlider(
items: child,
carouselController: buttonCarouselController,
options: CarouselOptions(
autoPlay: false,
enlargeCenterPage: true,
viewportFraction: 0.9,
aspectRatio: 2.0,
initialPage: 2,
),
),
RaisedButton(
onPressed: () => buttonCarouselController.nextPage(
duration: Duration(milliseconds: 300), curve: Curves.linear),
child: Text('→'),
)
]
);
}CarouselController methods
- Animate to the next page
- .nextPage({Duration duration, Curve curve})
- Animate to the previous page
- .previousPage({Duration duration, Curve curve})
- Jump to the given page
- .jumpToPage(int page)
- Animate to the given page.
- .animateToPage(int page, {Duration duration, Curve curve})
Example:
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() => runApp(BasicDemo());
class BasicDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<int> list = [1, 2, 3, 4, 5];
return Scaffold(
appBar: AppBar(title: Text('Basic demo')),
body: Container(
child: CarouselSlider(
options: CarouselOptions(),
items: list
.map((item) => Container(
child: Center(child: Text(item.toString())),
color: Colors.green,
))
.toList(),
)),
);
}
}6. image_picker: 0.8.3
A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the camera.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation :
First, add image_picker as a dependency in your pubspec.yaml file.
import 'package:image_picker/image_picker.dart';Note: Images and videos picked using the camera are saved to your application's local cache, and should therefore be expected to only be around temporarily. If you require your picked image to be stored permanently, it is your responsibility to move it to a more permanent location.
Example:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class ImagePickerScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
dynamic _image;
final picker = ImagePicker();
Future getImageCamera() async {
final pickedFile = await picker.getImage(source: ImageSource.camera);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
} else {
print('No image selected.');
}
});
}
Future getImageGallery() async {
final pickedFile =
await picker.getImage(source: ImageSource.gallery, imageQuality: 50);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
} else {
print('No image selected.');
}
});
}
void showPicker(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return SafeArea(
child: Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.photo_library),
title: new Text('Photo Library'),
onTap: () {
getImageGallery();
Navigator.of(context).pop();
}),
new ListTile(
leading: new Icon(Icons.photo_camera),
title: new Text('Camera'),
onTap: () {
getImageCamera();
Navigator.of(context).pop();
},
),
],
),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker Example'),
),
body: Center(
child: _image == null ? Text('No image selected.') : Image.file(_image),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showPicker(context);
},
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
);
}
}7. flutter_markdown 0.6.4
A markdown renderer for Flutter. Create rich text output, including text styles, tables, links, and more, from plain text data formatted with simple Markdown tags. It supports the original format, but no inline HTML.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation :
First, add flutter_markdown as a dependency in your pubspec.yaml file.
import 'package:flutter_markdown/flutter_markdown.dart';Emoji Support :
Method1
Markdown(
controller: controller,
selectable: true,
data: 'Insert emoji here😀 ',
)Method2
import 'package:markdown/markdown.dart' as md;
Markdown(
controller: controller,
selectable: true,
data: 'Insert emoji :smiley: here',
extensionSet: md.ExtensionSet(
md.ExtensionSet.gitHubFlavored.blockSyntaxes,
[md.EmojiSyntax(), ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes],
),
)Image Support:
The Img tag only supports the following image locations:
- From the network: Use a URL prefixed by either http:// or https://.
- From local files on the device: Use an absolute path to the file, for example by concatenating the file name with the path returned by a known storage location, such as those provided by the path_provider plugin.
- From image locations referring to bundled assets: Use an asset name prefixed by resource:. like resource:assets/image.png.
Example:
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
class MarkdownScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("MarkdownScreen"),
),
body: SafeArea(
child: Markdown(
data: "Maecenas eget **arcu egestas**, mollis ex vitae, po",
),
),
);
}
}
8. awesome_dialog: 2.1.1
Flutter package to show beautiful dialogs(INFO,QUESTION,WARNING,SUCCESS,ERROR) with animations as simply as possible.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation :
First, add flutter_markdown as a dependency in your pubspec.yaml file.
import 'package:awesome_dialog/awesome_dialog.dart';Custom Body :
If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.
AwesomeDialog(
context: context,
animType: AnimType.SCALE,
dialogType: DialogType.INFO,
body: Center(child: Text(
'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
style: TextStyle(fontStyle: FontStyle.italic),
),),
title: 'This is Ignored',
desc: 'This is also Ignored',
btnOkOnPress: () {},
)..show();Custom Button :
To use custom buttons, just specify the buttonOk or btnCancel widget, all text parameters icon etc will be ignored.
Dissmiss and Callback :
AwesomeDialog has onDissmissCallback() and can be dissmissed at any time using dissmiss() public method.
Check AwesomeDialog Class here https://pub.dev/packages/awesome_dialog#custom-button
Example:
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/material.dart';
import 'routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fancy Dialog Example',
theme: ThemeData.dark(),
initialRoute: '/',
onGenerateRoute: RouteGenerator.generateRoute,
);
}
}
class HomePage extends StatefulWidget {
const HomePage({
Key? key,
}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Awesome Dialog Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
AnimatedButton(
text: 'Info Dialog fixed width and sqare buttons',
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.INFO_REVERSED,
borderSide: BorderSide(color: Colors.green, width: 2),
width: 280,
buttonsBorderRadius: BorderRadius.all(Radius.circular(2)),
headerAnimationLoop: false,
animType: AnimType.BOTTOMSLIDE,
title: 'INFO',
desc: 'Dialog description here...',
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Question Dialog With Custom BTN Style',
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.QUESTION,
headerAnimationLoop: false,
animType: AnimType.BOTTOMSLIDE,
title: 'Question',
desc: 'Dialog description here...',
buttonsTextStyle: TextStyle(color: Colors.black),
showCloseIcon: true,
btnCancelOnPress: () {},
btnOkOnPress: () {},
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Info Dialog Without buttons',
pressEvent: () {
AwesomeDialog(
context: context,
headerAnimationLoop: true,
animType: AnimType.BOTTOMSLIDE,
title: 'INFO',
desc:
'Lorem ipsum dolor sit amet consectetur adipiscing elit eget ornare tempus, vestibulum sagittis rhoncus felis hendrerit lectus ultricies duis vel, id morbi cum ultrices tellus metus dis ut donec. Ut sagittis viverra venenatis eget euismod faucibus odio ligula phasellus,',
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Warning Dialog',
color: Colors.orange,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.WARNING,
headerAnimationLoop: false,
animType: AnimType.TOPSLIDE,
showCloseIcon: true,
closeIcon: Icon(Icons.close_fullscreen_outlined),
title: 'Warning',
desc:
'Dialog description here..................................................',
btnCancelOnPress: () {},
onDissmissCallback: (type) {
debugPrint('Dialog Dissmiss from callback $type');
},
btnOkOnPress: () {})
..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Error Dialog',
color: Colors.red,
pressEvent: () {
AwesomeDialog(
context: context,
dialogType: DialogType.ERROR,
animType: AnimType.RIGHSLIDE,
headerAnimationLoop: true,
title: 'Error',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {},
btnOkIcon: Icons.cancel,
btnOkColor: Colors.red)
..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Succes Dialog',
color: Colors.green,
pressEvent: () {
AwesomeDialog(
context: context,
animType: AnimType.LEFTSLIDE,
headerAnimationLoop: false,
dialogType: DialogType.SUCCES,
showCloseIcon: true,
title: 'Succes',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
onDissmissCallback: (type) {
debugPrint('Dialog Dissmiss from callback $type');
})
..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'No Header Dialog',
color: Colors.cyan,
pressEvent: () {
AwesomeDialog(
context: context,
headerAnimationLoop: false,
dialogType: DialogType.NO_HEADER,
title: 'No Header',
desc:
'Dialog description here..................................................',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Custom Body Dialog',
color: Colors.blueGrey,
pressEvent: () {
AwesomeDialog(
context: context,
animType: AnimType.SCALE,
dialogType: DialogType.INFO,
body: Center(
child: Text(
'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
title: 'This is Ignored',
desc: 'This is also Ignored',
)..show();
},
),
SizedBox(
height: 16,
),
AnimatedButton(
text: 'Body with Input',
color: Colors.blueGrey,
pressEvent: () {
late AwesomeDialog dialog;
dialog = AwesomeDialog(
context: context,
animType: AnimType.SCALE,
dialogType: DialogType.INFO,
keyboardAware: true,
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text(
'Form Data',
style: Theme.of(context).textTheme.headline6,
),
SizedBox(
height: 10,
),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
minLines: 1,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Title',
prefixIcon: Icon(Icons.text_fields),
),
),
),
SizedBox(
height: 10,
),
Material(
elevation: 0,
color: Colors.blueGrey.withAlpha(40),
child: TextFormField(
autofocus: true,
keyboardType: TextInputType.multiline,
maxLengthEnforced: true,
minLines: 2,
maxLines: null,
decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Description',
prefixIcon: Icon(Icons.text_fields),
),
),
),
SizedBox(
height: 10,
),
AnimatedButton(
isFixedHeight: false,
text: 'Close',
pressEvent: () {
dialog.dismiss();
})
],
),
),
)..show();
},
),
],
),
),
)));
}
}
9. flutter_datetime_picker: 1.5.1
Flutter package to choose date / time / date&time in English Dutch and Chinese, and you can also custom your own picker content
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation :
First, add flutter_markdown as a dependency in your pubspec.yaml file.
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';You can choose date / time / date&time in multiple languages, you can also custom your own picker content.
- Albanian(sq)
- Arabic(ar)
- Armenian(hy)
- Azerbaijan(az)
- Basque(eu)
- Bengali(bn)
- Bulgarian(bg)
- Catalan(cat)
- Chinese(zh)
- Danish(da)
- Dutch(nl)
- English(en)
- French(fr)
- German(de)
- Indonesian(id)
- Italian(it)
- Japanese(jp)
- Kazakh(kk)
- Korean(ko)
- Persian(fa)
- Polish (pl)
- Portuguese(pt)
- Russian(ru)
- Spanish(es)
- Swedish(sv)
- Thai(th)
- Turkish(tr)
- Vietnamese(vi)
- Khmer(kh)
Customize:
If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker model (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand
class CustomPicker extends CommonPickerModel {
String digits(int value, int length) {
return '$value'.padLeft(length, "0");
}
CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
this.currentTime = currentTime ?? DateTime.now();
this.setLeftIndex(this.currentTime.hour);
this.setMiddleIndex(this.currentTime.minute);
this.setRightIndex(this.currentTime.second);
}
@override
String leftStringAtIndex(int index) {
if (index >= 0 && index < 24) {
return this.digits(index, 2);
} else {
return null;
}
}
@override
String middleStringAtIndex(int index) {
if (index >= 0 && index < 60) {
return this.digits(index, 2);
} else {
return null;
}
}
@override
String rightStringAtIndex(int index) {
if (index >= 0 && index < 60) {
return this.digits(index, 2);
} else {
return null;
}
}
@override
String leftDivider() {
return "|";
}
@override
String rightDivider() {
return "|";
}
@override
List<int> layoutProportions() {
return [1, 2, 1];
}
@override
DateTime finalTime() {
return currentTime.isUtc
? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex())
: DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(),
this.currentMiddleIndex(), this.currentRightIndex());
}
}Example:
import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
class CustomPicker extends CommonPickerModel {
String digits(int value, int length) {
return '$value'.padLeft(length, "0");
}
CustomPicker({DateTime? currentTime, LocaleType? locale})
: super(locale: locale) {
this.currentTime = currentTime ?? DateTime.now();
this.setLeftIndex(this.currentTime.hour);
this.setMiddleIndex(this.currentTime.minute);
this.setRightIndex(this.currentTime.second);
}
@override
String? leftStringAtIndex(int index) {
if (index >= 0 && index < 24) {
return this.digits(index, 2);
} else {
return null;
}
}
@override
String? middleStringAtIndex(int index) {
if (index >= 0 && index < 60) {
return this.digits(index, 2);
} else {
return null;
}
}
@override
String? rightStringAtIndex(int index) {
if (index >= 0 && index < 60) {
return this.digits(index, 2);
} else {
return null;
}
}
@override
String leftDivider() {
return "|";
}
@override
String rightDivider() {
return "|";
}
@override
List<int> layoutProportions() {
return [1, 2, 1];
}
@override
DateTime finalTime() {
return currentTime.isUtc
? DateTime.utc(
currentTime.year,
currentTime.month,
currentTime.day,
this.currentLeftIndex(),
this.currentMiddleIndex(),
this.currentRightIndex())
: DateTime(
currentTime.year,
currentTime.month,
currentTime.day,
this.currentLeftIndex(),
this.currentMiddleIndex(),
this.currentRightIndex());
}
}
class DateTimePickerScreen extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Scaffold(
body: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('DateTimePickerScreen')),
body: Center(
child: Column(
children: <Widget>[
TextButton(
onPressed: () {
DatePicker.showDatePicker(context,
showTitleActions: true,
minTime: DateTime(2018, 3, 5),
maxTime: DateTime(2019, 6, 7),
theme: DatePickerTheme(
headerColor: Colors.orange,
backgroundColor: Colors.blue,
itemStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18),
doneStyle:
TextStyle(color: Colors.white, fontSize: 16)),
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime.now(), locale: LocaleType.en);
},
child: Text(
'show date picker(custom theme &date time range)',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime.now());
},
child: Text(
'show time picker',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showTime12hPicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime.now());
},
child: Text(
'show 12H time picker with AM/PM',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showDateTimePicker(context,
showTitleActions: true,
minTime: DateTime(2020, 5, 5, 20, 50),
maxTime: DateTime(2020, 6, 7, 05, 09), onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, locale: LocaleType.zh);
},
child: Text(
'show date time picker (Chinese)',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
}, currentTime: DateTime(2008, 12, 31, 23, 12, 34));
},
child: Text(
'show date time picker (English-America)',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
locale: LocaleType.nl);
},
child: Text(
'show date time picker (Dutch)',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime(2008, 12, 31, 23, 12, 34),
locale: LocaleType.ru);
},
child: Text(
'show date time picker (Russian)',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showDateTimePicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
currentTime: DateTime.utc(2019, 12, 31, 23, 12, 34),
locale: LocaleType.de);
},
child: Text(
'show date time picker in UTC (German)',
style: TextStyle(color: Colors.blue),
)),
TextButton(
onPressed: () {
DatePicker.showPicker(context, showTitleActions: true,
onChanged: (date) {
print('change $date in time zone ' +
date.timeZoneOffset.inHours.toString());
}, onConfirm: (date) {
print('confirm $date');
},
pickerModel: CustomPicker(currentTime: DateTime.now()),
locale: LocaleType.en);
},
child: Text(
'show custom time picker,\nyou can custom picker model like this',
style: TextStyle(color: Colors.blue),
)),
],
),
),
);
}
}
10. pdf_render 1.0.12
The pdf_render package provides you with intermediate PDF rendering APIs and easy-to-use Flutter Widgets
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️
Web Setup:
For Web, you should add <script> tags on your index.html
The plugin now utilizes PDF.js to support Flutter Web (still very early stage of implementation).
To use the Flutter Web support, you should add the following code just before <script src="main.dart.js" type="application/javascript"></script> inside index.html
<!-- IMPORTANT: load pdfjs files -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/build/pdf.js" type="text/javascript"></script>
<script type="text/javascript">
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/build/pdf.worker.min.js";
pdfRenderOptions = {
// where cmaps are downloaded from
cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.6.347/cmaps/',
// The cmaps are compressed in the case
cMapPacked: true,
// any other options for pdfjsLib.getDocument.
// params: {}
}
</script>Usage:
Firstly, you must add the following import::
import 'package:pdf_render/pdf_render_widgets.dart';PdfViewer:
PdfViewer is an extensible PDF document viewer widget which supports pinch-zoom. The code uses PdfViewer.openAsset to load a asset PDF file. There are also PdfViewer.openFile for local file and PdfViewer.openData for Uint8List of PDF binary data
The following fragment is a simplest use of the widget:
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Pdf_render example app'),
),
backgroundColor: Colors.grey,
// You can use either PdfViewer.openFile, PdfViewer.openAsset, or PdfViewer.openData
body: PdfViewer.openAsset(
'assets/hello.pdf',
params: PdfViewerParams(pageNumber: 2), // show the page-2
)
)
);
}Missing network support?:
A frequent feature request is something like PdfViewer.openUri. The plugin does not have it but it's easy to implement it with flutter_cache_manager:
FutureBuilder<File>(
future: DefaultCacheManager().getSingleFile(
'https://github.com/espresso3389/flutter_pdf_render/raw/master/example/assets/hello.pdf'),
builder: (context, snapshot) => snapshot.hasData
? PdfViewer.openFile(snapshot.data!.path)
: Container( /* placeholder */),
)Example:
import 'dart:io';
import 'package:flutter/foundation.dart' show kIsWeb; // for checking whether running on Web or not
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:pdf_render/pdf_render_widgets.dart';
void main(List<String> args) => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final controller = PdfViewerController();
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: ValueListenableBuilder<Object>(
// The controller is compatible with ValueListenable<Matrix4> and you can receive notifications on scrolling and zooming of the view.
valueListenable: controller,
builder: (context, _, child) =>
Text(controller.isReady ? 'Page #${controller.currentPageNumber}' : 'Page -')),
),
backgroundColor: Colors.grey,
body: !kIsWeb && Platform.isMacOS
// Networking sample using flutter_cache_manager
? PdfViewer.openFutureFile(
// Accepting function that returns Future<String> of PDF file path
() async => (await DefaultCacheManager().getSingleFile(
'https://github.com/espresso3389/flutter_pdf_render/raw/master/example/assets/hello.pdf'))
.path,
viewerController: controller,
onError: (err) => print(err),
params: PdfViewerParams(
padding: 10,
minScale: 1.0,
),
)
: PdfViewer.openAsset(
'assets/hello.pdf',
viewerController: controller,
onError: (err) => print(err),
params: PdfViewerParams(
padding: 10,
minScale: 1.0,
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
child: Icon(Icons.first_page),
onPressed: () => controller.ready?.goToPage(pageNumber: 1),
),
FloatingActionButton(
child: Icon(Icons.last_page),
onPressed: () => controller.ready?.goToPage(pageNumber: controller.pageCount),
),
],
),
),
);
}
}11. flutter_rating_bar: 4.0.0
A simple yet fully customizable rating bar for flutter which also include a rating bar indicator, supporting any fraction of rating.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Usage:
import 'package:flutter_rating_bar/flutter_rating_bar.dart';RatingBar.builder():
RatingBar.builder(
initialRating: 3,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
print(rating);
},
);RatingBar():
RatingBar(
initialRating: 3,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
ratingWidget: RatingWidget(
full: _image('assets/heart.png'),
half: _image('assets/heart_half.png'),
empty: _image('assets/heart_border.png'),
),
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
onRatingUpdate: (rating) {
print(rating);
},
);RatingBar.builder() with index:
RatingBar.builder(
initialRating: 3,
itemCount: 5,
itemBuilder: (context, index) {
switch (index) {
case 0:
return Icon(
Icons.sentiment_very_dissatisfied,
color: Colors.red,
);
case 1:
return Icon(
Icons.sentiment_dissatisfied,
color: Colors.redAccent,
);
case 2:
return Icon(
Icons.sentiment_neutral,
color: Colors.amber,
);
case 3:
return Icon(
Icons.sentiment_satisfied,
color: Colors.lightGreen,
);
case 4:
return Icon(
Icons.sentiment_very_satisfied,
color: Colors.green,
);
}
},
onRatingUpdate: (rating) {
print(rating);
},
;RatingBarIndicator() & vertical:
RatingBarIndicator(
rating: 2.75,
itemBuilder: (context, index) => Icon(
Icons.star,
color: Colors.amber,
),
itemCount: 5,
itemSize: 50.0,
direction: Axis.vertical,
),Example:
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late final _ratingController;
late double _rating;
double _userRating = 3.0;
int _ratingBarMode = 1;
double _initialRating = 2.0;
bool _isRTLMode = false;
bool _isVertical = false;
IconData? _selectedIcon;
@override
void initState() {
super.initState();
_ratingController = TextEditingController(text: '3.0');
_rating = _initialRating;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.amber,
appBarTheme: AppBarTheme(
textTheme: TextTheme(
headline6: Theme.of(context)
.textTheme
.headline6
?.copyWith(color: Colors.white),
),
),
),
home: Builder(
builder: (context) => Scaffold(
appBar: AppBar(
title: Text('Flutter Rating Bar'),
actions: [
IconButton(
icon: Icon(Icons.settings),
color: Colors.white,
onPressed: () async {
_selectedIcon = await showDialog<IconData>(
context: context,
builder: (context) => IconAlert(),
);
_ratingBarMode = 1;
setState(() {});
},
),
],
),
body: Directionality(
textDirection: _isRTLMode ? TextDirection.rtl : TextDirection.ltr,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 40.0,
),
_heading('Rating Bar'),
_ratingBar(_ratingBarMode),
SizedBox(height: 20.0),
Text(
'Rating: $_rating',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 40.0),
_heading('Rating Indicator'),
RatingBarIndicator(
rating: _userRating,
itemBuilder: (context, index) => Icon(
_selectedIcon ?? Icons.star,
color: Colors.amber,
),
itemCount: 5,
itemSize: 50.0,
unratedColor: Colors.amber.withAlpha(50),
direction: _isVertical ? Axis.vertical : Axis.horizontal,
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: TextFormField(
controller: _ratingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter rating',
labelText: 'Enter rating',
suffixIcon: MaterialButton(
onPressed: () {
_userRating =
double.parse(_ratingController.text ?? '0.0');
setState(() {});
},
child: Text('Rate'),
),
),
),
),
SizedBox(height: 40.0),
_heading('Scrollable Rating Indicator'),
RatingBarIndicator(
rating: 8.2,
itemCount: 20,
itemSize: 30.0,
physics: BouncingScrollPhysics(),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
),
SizedBox(height: 20.0),
Text(
'Rating Bar Modes',
style: TextStyle(fontWeight: FontWeight.w300),
),
Row(
children: [
_radio(1),
_radio(2),
_radio(3),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Switch to Vertical Bar',
style: TextStyle(fontWeight: FontWeight.w300),
),
Switch(
value: _isVertical,
onChanged: (value) {
setState(() {
_isVertical = value;
});
},
activeColor: Colors.amber,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Switch to RTL Mode',
style: TextStyle(fontWeight: FontWeight.w300),
),
Switch(
value: _isRTLMode,
onChanged: (value) {
setState(() {
_isRTLMode = value;
});
},
activeColor: Colors.amber,
),
],
),
],
),
),
),
),
),
);
}
Widget _radio(int value) {
return Expanded(
child: RadioListTile<int>(
value: value,
groupValue: _ratingBarMode,
dense: true,
title: Text(
'Mode $value',
style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 12.0,
),
),
onChanged: (value) {
setState(() {
_ratingBarMode = value!;
});
},
),
);
}
Widget _ratingBar(int mode) {
switch (mode) {
case 1:
return RatingBar.builder(
initialRating: _initialRating,
minRating: 1,
direction: _isVertical ? Axis.vertical : Axis.horizontal,
allowHalfRating: true,
unratedColor: Colors.amber.withAlpha(50),
itemCount: 5,
itemSize: 50.0,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
_selectedIcon ?? Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
setState(() {
_rating = rating;
});
},
updateOnDrag: true,
);
case 2:
return RatingBar(
initialRating: _initialRating,
direction: _isVertical ? Axis.vertical : Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
ratingWidget: RatingWidget(
full: _image('assets/heart.png'),
half: _image('assets/heart_half.png'),
empty: _image('assets/heart_border.png'),
),
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
onRatingUpdate: (rating) {
setState(() {
_rating = rating;
});
},
updateOnDrag: true,
);
case 3:
return RatingBar.builder(
initialRating: _initialRating,
direction: _isVertical ? Axis.vertical : Axis.horizontal,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, index) {
switch (index) {
case 0:
return Icon(
Icons.sentiment_very_dissatisfied,
color: Colors.red,
);
case 1:
return Icon(
Icons.sentiment_dissatisfied,
color: Colors.redAccent,
);
case 2:
return Icon(
Icons.sentiment_neutral,
color: Colors.amber,
);
case 3:
return Icon(
Icons.sentiment_satisfied,
color: Colors.lightGreen,
);
case 4:
return Icon(
Icons.sentiment_very_satisfied,
color: Colors.green,
);
default:
return Container();
}
},
onRatingUpdate: (rating) {
setState(() {
_rating = rating;
});
},
updateOnDrag: true,
);
default:
return Container();
}
}
Widget _image(String asset) {
return Image.asset(
asset,
height: 30.0,
width: 30.0,
color: Colors.amber,
);
}
Widget _heading(String text) => Column(
children: [
Text(
text,
style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 24.0,
),
),
SizedBox(
height: 20.0,
),
],
);
}
class IconAlert extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(
'Select Icon',
style: TextStyle(
fontWeight: FontWeight.w300,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
titlePadding: EdgeInsets.all(12.0),
contentPadding: EdgeInsets.all(0),
content: Wrap(
children: [
_iconButton(context, Icons.home),
_iconButton(context, Icons.airplanemode_active),
_iconButton(context, Icons.euro_symbol),
_iconButton(context, Icons.beach_access),
_iconButton(context, Icons.attach_money),
_iconButton(context, Icons.music_note),
_iconButton(context, Icons.android),
_iconButton(context, Icons.toys),
_iconButton(context, Icons.language),
_iconButton(context, Icons.landscape),
_iconButton(context, Icons.ac_unit),
_iconButton(context, Icons.star),
],
),
);
}
Widget _iconButton(BuildContext context, IconData icon) => IconButton(
icon: Icon(icon),
onPressed: () => Navigator.pop(context, icon),
splashColor: Colors.amberAccent,
color: Colors.amber,
);
}12. webview_flutter 2.0.13
A Flutter plugin that provides a WebView widget.
The path package provides common operations for webview function.
On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Usage:
Add webview_flutter as a dependency in your pubspec.yaml file. If you are targeting Android, make sure to read the Android Platform Views section below to choose the platform view mode that best suits your needs.
You can now include a WebView widget in your widget tree. See the WebView widget's Dartdoc for more details on how to use the widget.
import 'package:webview_flutter/webview_flutter.dart';Android Platform Views
The WebView is relying on Platform Views to embed the Android’s webview within the Flutter app. It supports two modes: Virtual displays (the current default) and Hybrid composition.
- Using Virtual displays
The mode is currently enabled by default. You should however make sure to set the correct minSdkVersion in android/app/build.gradle (if it was previously lower than 20):
android {
defaultConfig {
minSdkVersion 20
}
}- Using Hybrid Composition
Set the correct minSdkVersion in android/app/build.gradle (if it was previously lower than 19):
android {
defaultConfig {
minSdkVersion 19
}
}Set WebView.platform = SurfaceAndroidWebView(); in initState(). For example:
import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewExample extends StatefulWidget {
@override
WebViewExampleState createState() => WebViewExampleState();
}
class WebViewExampleState extends State<WebViewExample> {
@override
void initState() {
super.initState();
// Enable hybrid composition.
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
@override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://flutter.dev',
);
}
}Example:
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// ignore_for_file: public_member_api_docs
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MaterialApp(home: WebViewExample()));
const String kNavigationExamplePage = '''
<!DOCTYPE html><html>
<head><title>Navigation Delegate Example</title></head>
<body>
<p>
The navigation delegate is set to block navigation to the youtube website.
</p>
<ul>
<ul><a href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
<ul><a href="https://www.google.com/">https://www.google.com/</a></ul>
</ul>
</body>
</html>
''';
class WebViewExample extends StatefulWidget {
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
@override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView example'),
// This drop down menu demonstrates that Flutter widgets can be shown over the web view.
actions: <Widget>[
NavigationControls(_controller.future),
SampleMenu(_controller.future),
],
),
// We're using a Builder here so we have a context that is below the Scaffold
// to allow calling Scaffold.of(context) so we can show a snackbar.
body: Builder(builder: (BuildContext context) {
return WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
onProgress: (int progress) {
print("WebView is loading (progress : $progress%)");
},
javascriptChannels: <JavascriptChannel>{
_toasterJavascriptChannel(context),
},
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('https://www.youtube.com/')) {
print('blocking navigation to $request}');
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate;
},
onPageStarted: (String url) {
print('Page started loading: $url');
},
onPageFinished: (String url) {
print('Page finished loading: $url');
},
gestureNavigationEnabled: true,
);
}),
floatingActionButton: favoriteButton(),
);
}
JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toaster',
onMessageReceived: (JavascriptMessage message) {
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
SnackBar(content: Text(message.message)),
);
});
}
Widget favoriteButton() {
return FutureBuilder<WebViewController>(
future: _controller.future,
builder: (BuildContext context,
AsyncSnapshot<WebViewController> controller) {
if (controller.hasData) {
return FloatingActionButton(
onPressed: () async {
final String url = (await controller.data!.currentUrl())!;
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Favorited $url')),
);
},
child: const Icon(Icons.favorite),
);
}
return Container();
});
}
}
enum MenuOptions {
showUserAgent,
listCookies,
clearCookies,
addToCache,
listCache,
clearCache,
navigationDelegate,
}
class SampleMenu extends StatelessWidget {
SampleMenu(this.controller);
final Future<WebViewController> controller;
final CookieManager cookieManager = CookieManager();
@override
Widget build(BuildContext context) {
return FutureBuilder<WebViewController>(
future: controller,
builder:
(BuildContext context, AsyncSnapshot<WebViewController> controller) {
return PopupMenuButton<MenuOptions>(
onSelected: (MenuOptions value) {
switch (value) {
case MenuOptions.showUserAgent:
_onShowUserAgent(controller.data!, context);
break;
case MenuOptions.listCookies:
_onListCookies(controller.data!, context);
break;
case MenuOptions.clearCookies:
_onClearCookies(context);
break;
case MenuOptions.addToCache:
_onAddToCache(controller.data!, context);
break;
case MenuOptions.listCache:
_onListCache(controller.data!, context);
break;
case MenuOptions.clearCache:
_onClearCache(controller.data!, context);
break;
case MenuOptions.navigationDelegate:
_onNavigationDelegateExample(controller.data!, context);
break;
}
},
itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
PopupMenuItem<MenuOptions>(
value: MenuOptions.showUserAgent,
child: const Text('Show user agent'),
enabled: controller.hasData,
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.listCookies,
child: Text('List cookies'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.clearCookies,
child: Text('Clear cookies'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.addToCache,
child: Text('Add to cache'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.listCache,
child: Text('List cache'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.clearCache,
child: Text('Clear cache'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.navigationDelegate,
child: Text('Navigation Delegate example'),
),
],
);
},
);
}
void _onShowUserAgent(
WebViewController controller, BuildContext context) async {
// Send a message with the user agent string to the Toaster JavaScript channel we registered
// with the WebView.
await controller.evaluateJavascript(
'Toaster.postMessage("User Agent: " + navigator.userAgent);');
}
void _onListCookies(
WebViewController controller, BuildContext context) async {
final String cookies =
await controller.evaluateJavascript('document.cookie');
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(SnackBar(
content: Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Cookies:'),
_getCookieList(cookies),
],
),
));
}
void _onAddToCache(WebViewController controller, BuildContext context) async {
await controller.evaluateJavascript(
'caches.open("test_caches_entry"); localStorage["test_localStorage"] = "dummy_entry";');
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(const SnackBar(
content: Text('Added a test entry to cache.'),
));
}
void _onListCache(WebViewController controller, BuildContext context) async {
await controller.evaluateJavascript('caches.keys()'
'.then((cacheKeys) => JSON.stringify({"cacheKeys" : cacheKeys, "localStorage" : localStorage}))'
'.then((caches) => Toaster.postMessage(caches))');
}
void _onClearCache(WebViewController controller, BuildContext context) async {
await controller.clearCache();
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(const SnackBar(
content: Text("Cache cleared."),
));
}
void _onClearCookies(BuildContext context) async {
final bool hadCookies = await cookieManager.clearCookies();
String message = 'There were cookies. Now, they are gone!';
if (!hadCookies) {
message = 'There are no cookies.';
}
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(message),
));
}
void _onNavigationDelegateExample(
WebViewController controller, BuildContext context) async {
final String contentBase64 =
base64Encode(const Utf8Encoder().convert(kNavigationExamplePage));
await controller.loadUrl('data:text/html;base64,$contentBase64');
}
Widget _getCookieList(String cookies) {
if (cookies == null || cookies == '""') {
return Container();
}
final List<String> cookieList = cookies.split(';');
final Iterable<Text> cookieWidgets =
cookieList.map((String cookie) => Text(cookie));
return Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: cookieWidgets.toList(),
);
}
}
class NavigationControls extends StatelessWidget {
const NavigationControls(this._webViewControllerFuture)
: assert(_webViewControllerFuture != null);
final Future<WebViewController> _webViewControllerFuture;
@override
Widget build(BuildContext context) {
return FutureBuilder<WebViewController>(
future: _webViewControllerFuture,
builder:
(BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
final bool webViewReady =
snapshot.connectionState == ConnectionState.done;
final WebViewController controller = snapshot.data!;
return Row(
children: <Widget>[
IconButton(
icon: const Icon(Icons.arrow_back_ios),
onPressed: !webViewReady
? null
: () async {
if (await controller.canGoBack()) {
await controller.goBack();
} else {
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
const SnackBar(content: Text("No back history item")),
);
return;
}
},
),
IconButton(
icon: const Icon(Icons.arrow_forward_ios),
onPressed: !webViewReady
? null
: () async {
if (await controller.canGoForward()) {
await controller.goForward();
} else {
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
const SnackBar(
content: Text("No forward history item")),
);
return;
}
},
),
IconButton(
icon: const Icon(Icons.replay),
onPressed: !webViewReady
? null
: () {
controller.reload();
},
),
],
);
},
);
}
}13. url_launcher 6.0.11
A Flutter plugin for launching a URL
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Usage:
import 'package:url_launcher/url_launcher.dart';Installation:
iOS
Add any URL schemes passed to canLaunch as LSApplicationQueriesSchemes entries in your Info.plist file.
<key>LSApplicationQueriesSchemes</key>
<array>
<string>https</string>
<string>http</string>
</array>
Android Starting from API 30 Android requires package visibility configuration in your AndroidManifest.xml otherwise canLaunch will return false. A <queries> element must be added to your manifest as a child of the root element.
<queries>
<!-- If your app opens https URLs -->
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="https" />
</intent>
<!-- If your app makes calls -->
<intent>
<action android:name="android.intent.action.DIAL" />
<data android:scheme="tel" />
</intent>
<!-- If your app emails -->
<intent>
<action android:name="android.intent.action.SEND" />
<data android:mimeType="*/*" />
</intent>
</queries>
Supported URL schemes:
Scheme | Action |
|---|---|
http:<URL> , https:<URL>, e.g. http://flutter.dev | Open URL in the default browser |
mailto:<email address>?subject=<subject>&body=<body>, e.g. mailto:smith@example.org?subject=News&body=New%20plugin | Create email to |
tel:<phone number>, e.g. tel:+1 555 010 999 | Make a phone call to |
sms:<phone number>, e.g. sms:5550101234 | Send an SMS message to |
Example:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:url_launcher/link.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'URL Launcher',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'URL Launcher'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<void>? _launched;
String _phone = '';
Future<void> _launchInBrowser(String url) async {
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: false,
forceWebView: false,
headers: <String, String>{'my_header_key': 'my_header_value'},
);
} else {
throw 'Could not launch $url';
}
}
Future<void> _launchInWebViewOrVC(String url) async {
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: true,
forceWebView: true,
headers: <String, String>{'my_header_key': 'my_header_value'},
);
} else {
throw 'Could not launch $url';
}
}
Future<void> _launchInWebViewWithJavaScript(String url) async {
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: true,
forceWebView: true,
enableJavaScript: true,
);
} else {
throw 'Could not launch $url';
}
}
Future<void> _launchInWebViewWithDomStorage(String url) async {
if (await canLaunch(url)) {
await launch(
url,
forceSafariVC: true,
forceWebView: true,
enableDomStorage: true,
);
} else {
throw 'Could not launch $url';
}
}
Future<void> _launchUniversalLinkIos(String url) async {
if (await canLaunch(url)) {
final bool nativeAppLaunchSucceeded = await launch(
url,
forceSafariVC: false,
universalLinksOnly: true,
);
if (!nativeAppLaunchSucceeded) {
await launch(
url,
forceSafariVC: true,
);
}
}
}
Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return const Text('');
}
}
Future<void> _makePhoneCall(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
@override
Widget build(BuildContext context) {
const String toLaunch = 'https://www.cylog.org/headers/';
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
onChanged: (String text) => _phone = text,
decoration: const InputDecoration(
hintText: 'Input the phone number to launch')),
),
ElevatedButton(
onPressed: () => setState(() {
_launched = _makePhoneCall('tel:$_phone');
}),
child: const Text('Make phone call'),
),
const Padding(
padding: EdgeInsets.all(16.0),
child: Text(toLaunch),
),
ElevatedButton(
onPressed: () => setState(() {
_launched = _launchInBrowser(toLaunch);
}),
child: const Text('Launch in browser'),
),
const Padding(padding: EdgeInsets.all(16.0)),
ElevatedButton(
onPressed: () => setState(() {
_launched = _launchInWebViewOrVC(toLaunch);
}),
child: const Text('Launch in app'),
),
ElevatedButton(
onPressed: () => setState(() {
_launched = _launchInWebViewWithJavaScript(toLaunch);
}),
child: const Text('Launch in app(JavaScript ON)'),
),
ElevatedButton(
onPressed: () => setState(() {
_launched = _launchInWebViewWithDomStorage(toLaunch);
}),
child: const Text('Launch in app(DOM storage ON)'),
),
const Padding(padding: EdgeInsets.all(16.0)),
ElevatedButton(
onPressed: () => setState(() {
_launched = _launchUniversalLinkIos(toLaunch);
}),
child: const Text(
'Launch a universal link in a native app, fallback to Safari.(Youtube)'),
),
const Padding(padding: EdgeInsets.all(16.0)),
ElevatedButton(
onPressed: () => setState(() {
_launched = _launchInWebViewOrVC(toLaunch);
Timer(const Duration(seconds: 5), () {
print('Closing WebView after 5 seconds...');
closeWebView();
});
}),
child: const Text('Launch in app + close after 5 seconds'),
),
const Padding(padding: EdgeInsets.all(16.0)),
Link(
uri: Uri.parse(
'https://pub.dev/documentation/url_launcher/latest/link/link-library.html'),
target: LinkTarget.blank,
builder: (ctx, openLink) {
return TextButton.icon(
onPressed: openLink,
label: Text('Link Widget documentation'),
icon: Icon(Icons.read_more),
);
},
),
const Padding(padding: EdgeInsets.all(16.0)),
FutureBuilder<void>(future: _launched, builder: _launchStatus),
],
),
],
),
);
}
}
14. share_plus 2.1.2
Flutter plugin for sharing content via the platform share UI, using the ACTION_SEND intent on Android and UIActivityViewController on iOS.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️
**Also compatible with Windows and Linux by using "mailto" to share text via Email.
**Sharing files is not supported on Windows and Linux.
Installation:
First, add share_plus as a dependency in your pubspec.yaml file.
Usage:
import 'package:share_plus/share_plus.dart';Then invoke the static share method anywhere in your Dart code.
Share.share('check out my website https://example.com');The share method also takes an optional subject that will be used when sharing to email.
Share.share('check out my website https://example.com', subject: 'Look what I made!');To share one or multiple files invoke the static shareFiles method anywhere in your Dart code. Optionally you can also pass in text and subject.
Share.shareFiles(['${directory.path}/image.jpg'], text: 'Great picture');
Share.shareFiles(['${directory.path}/image1.jpg', '${directory.path}/image2.jpg']);Example:
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:share_plus/share_plus.dart';
import 'image_previews.dart';
void main() {
runApp(DemoApp());
}
class DemoApp extends StatefulWidget {
@override
DemoAppState createState() => DemoAppState();
}
class DemoAppState extends State<DemoApp> {
String text = '';
String subject = '';
List<String> imagePaths = [];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Share Plugin Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Share Plugin Demo'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
decoration: const InputDecoration(
labelText: 'Share text:',
hintText: 'Enter some text and/or link to share',
),
maxLines: 2,
onChanged: (String value) => setState(() {
text = value;
}),
),
TextField(
decoration: const InputDecoration(
labelText: 'Share subject:',
hintText: 'Enter subject to share (optional)',
),
maxLines: 2,
onChanged: (String value) => setState(() {
subject = value;
}),
),
const Padding(padding: EdgeInsets.only(top: 12.0)),
ImagePreviews(imagePaths, onDelete: _onDeleteImage),
ListTile(
leading: Icon(Icons.add),
title: Text('Add image'),
onTap: () async {
final imagePicker = ImagePicker();
final pickedFile = await imagePicker.getImage(
source: ImageSource.gallery,
);
if (pickedFile != null) {
setState(() {
imagePaths.add(pickedFile.path);
});
}
},
),
const Padding(padding: EdgeInsets.only(top: 12.0)),
Builder(
builder: (BuildContext context) {
return ElevatedButton(
onPressed: text.isEmpty && imagePaths.isEmpty
? null
: () => _onShare(context),
child: const Text('Share'),
);
},
),
],
),
),
)),
);
}
void _onDeleteImage(int position) {
setState(() {
imagePaths.removeAt(position);
});
}
void _onShare(BuildContext context) async {
// A builder is used to retrieve the context immediately
// surrounding the ElevatedButton.
//
// The context's `findRenderObject` returns the first
// RenderObject in its descendent tree when it's not
// a RenderObjectWidget. The ElevatedButton's RenderObject
// has its position and size after it's built.
final box = context.findRenderObject() as RenderBox?;
if (imagePaths.isNotEmpty) {
await Share.shareFiles(imagePaths,
text: text,
subject: subject,
sharePositionOrigin: box!.localToGlobal(Offset.zero) & box.size);
} else {
await Share.share(text,
subject: subject,
sharePositionOrigin: box!.localToGlobal(Offset.zero) & box.size);
}
}
}
15. version_check 0.2.0
Flutter plugin check iOS/Android/Mac store app version and provide update alert if neccessary.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️
Installation:
First, add version_check as a dependency in your pubspec.yaml file.
Usage:
import 'package:version_check/version_check.dart';Then
final versionCheck = VersionCheck();
@override
void initState() {
super.initState();
checkVersion();
}
Future checkVersion() async {
await versionCheck.checkVersion(context);
}Example:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:version_check/version_check.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'version_check demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'version_check demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String? version = '';
String? storeVersion = '';
String? storeUrl = '';
String? packageName = '';
@override
void initState() {
super.initState();
checkVersion();
}
final versionCheck = VersionCheck(
packageName: Platform.isIOS
? 'com.tachyonfactory.iconFinder'
: 'com.tachyonfactory.icon_finder',
packageVersion: '1.0.1',
showUpdateDialog: customShowUpdateDialog,
);
Future checkVersion() async {
await versionCheck.checkVersion(context);
setState(() {
version = versionCheck.packageVersion;
packageName = versionCheck.packageName;
storeVersion = versionCheck.storeVersion;
storeUrl = versionCheck.storeUrl;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title!),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'packageVersion = $version',
),
Text(
'storeVersion = $storeVersion',
),
Text(
'storeUrl = $storeUrl',
),
Text(
'packageName = $packageName',
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.store),
onPressed: () async {
await versionCheck.launchStore();
},
),
);
}
}
void customShowUpdateDialog(BuildContext context, VersionCheck versionCheck) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
title: Text('NEW Update Available'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(
'Do you REALLY want to update to ${versionCheck.storeVersion}?'),
Text('(current version ${versionCheck.packageVersion})'),
],
),
),
actions: <Widget>[
TextButton(
child: Text('Update'),
onPressed: () async {
await versionCheck.launchStore();
Navigator.of(context).pop();
},
),
TextButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
);
}
16. simple_moment 1.1.1
Flutter plugin that provide simple implementation of the Moment.js features for relative time in Dart.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation:
First, add simple_moment as a dependency in your pubspec.yaml file.
Usage:
import 'package:simple_moment/simple_moment.dart';Set the locale for all usages of Moment:
Moment.setLocaleGlobally(new LocaleDe());Set the locale only for the current instance of Moment:
var moment = new Moment.now().locale(new LocaleDe());Adding your own locale:
- Just create a class that implements ILocaleData and assign that to your Moment instance or set it globally.
Overwriting existing locales:
class ShortLocaleEn extends LocaleEn {
String get seconds => '%is';
String get aMinute => '%im';
String get minutes => '%im';
String get anHour => '%ih';
String get hours => '%ih';
String get aDay => '%id';
String get days => '%id';
}Using intl to format dates:
// create new Moment instance with german locale
var moment = Moment.now().locale(LocaleDe(), useInFormat: true);
// initialize intl
await initializeDateFormatting(moment.usedLocale.localeString);
// format and print the current month in german
var formattedString = moment.format("LLLL");
print(formattedString);Example:
import 'package:simple_moment/simple_moment.dart';
main() {
var secondsToAdd = new Duration(seconds: 10);
var dateForComparison = new DateTime.now().add(secondsToAdd);
var moment = new Moment.now();
// should print "in a few seconds"
print(moment.from(dateForComparison));
Moment rawDate = Moment.parse("2020-07-03");
// should print "2020-08-03 00:00:00.000
print(rawDate.add(months: 1));
// should print "2019-07-03 00:00:00.000
print(rawDate.subtract(years: 1));
//should print "03-07-2020 00:00"
print(rawDate.format("dd-MM-yyyy HH:mm"));
}
17. path_provider 2.0.5
Flutter plugin for finding commonly used locations on the filesystem. Supports Android, iOS, Linux, macOS and Windows. Not all methods are supported on all platforms.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️
Installation:
First, add path_provider as a dependency in your pubspec.yaml file.
Usage:
import 'package:path_provider/path_provider.dart';Usage in tests:
path_provider now uses a PlatformInterface, meaning that not all platforms share the a single PlatformChannel-based implementation. With that change, tests should be updated to mock PathProviderPlatform rather than PlatformChannel.
Example:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Path Provider',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Path Provider'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<Directory?>? _tempDirectory;
Future<Directory?>? _appSupportDirectory;
Future<Directory?>? _appLibraryDirectory;
Future<Directory?>? _appDocumentsDirectory;
Future<Directory?>? _externalDocumentsDirectory;
Future<List<Directory>?>? _externalStorageDirectories;
Future<List<Directory>?>? _externalCacheDirectories;
void _requestTempDirectory() {
setState(() {
_tempDirectory = getTemporaryDirectory();
});
}
Widget _buildDirectory(
BuildContext context, AsyncSnapshot<Directory?> snapshot) {
Text text = const Text('');
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
text = Text('Error: ${snapshot.error}');
} else if (snapshot.hasData) {
text = Text('path: ${snapshot.data!.path}');
} else {
text = const Text('path unavailable');
}
}
return Padding(padding: const EdgeInsets.all(16.0), child: text);
}
Widget _buildDirectories(
BuildContext context, AsyncSnapshot<List<Directory>?> snapshot) {
Text text = const Text('');
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
text = Text('Error: ${snapshot.error}');
} else if (snapshot.hasData) {
final String combined =
snapshot.data!.map((Directory d) => d.path).join(', ');
text = Text('paths: $combined');
} else {
text = const Text('path unavailable');
}
}
return Padding(padding: const EdgeInsets.all(16.0), child: text);
}
void _requestAppDocumentsDirectory() {
setState(() {
_appDocumentsDirectory = getApplicationDocumentsDirectory();
});
}
void _requestAppSupportDirectory() {
setState(() {
_appSupportDirectory = getApplicationSupportDirectory();
});
}
void _requestAppLibraryDirectory() {
setState(() {
_appLibraryDirectory = getLibraryDirectory();
});
}
void _requestExternalStorageDirectory() {
setState(() {
_externalDocumentsDirectory = getExternalStorageDirectory();
});
}
void _requestExternalStorageDirectories(StorageDirectory type) {
setState(() {
_externalStorageDirectories = getExternalStorageDirectories(type: type);
});
}
void _requestExternalCacheDirectories() {
setState(() {
_externalCacheDirectories = getExternalCacheDirectories();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: const Text('Get Temporary Directory'),
onPressed: _requestTempDirectory,
),
),
FutureBuilder<Directory?>(
future: _tempDirectory, builder: _buildDirectory),
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: const Text('Get Application Documents Directory'),
onPressed: _requestAppDocumentsDirectory,
),
),
FutureBuilder<Directory?>(
future: _appDocumentsDirectory, builder: _buildDirectory),
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: const Text('Get Application Support Directory'),
onPressed: _requestAppSupportDirectory,
),
),
FutureBuilder<Directory?>(
future: _appSupportDirectory, builder: _buildDirectory),
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: const Text('Get Application Library Directory'),
onPressed: _requestAppLibraryDirectory,
),
),
FutureBuilder<Directory?>(
future: _appLibraryDirectory, builder: _buildDirectory),
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: Text(Platform.isIOS
? 'External directories are unavailable on iOS'
: 'Get External Storage Directory'),
onPressed:
Platform.isIOS ? null : _requestExternalStorageDirectory,
),
),
FutureBuilder<Directory?>(
future: _externalDocumentsDirectory, builder: _buildDirectory),
Column(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: Text(Platform.isIOS
? 'External directories are unavailable on iOS'
: 'Get External Storage Directories'),
onPressed: Platform.isIOS
? null
: () {
_requestExternalStorageDirectories(
StorageDirectory.music,
);
},
),
),
]),
FutureBuilder<List<Directory>?>(
future: _externalStorageDirectories,
builder: _buildDirectories),
Column(children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
child: Text(Platform.isIOS
? 'External directories are unavailable on iOS'
: 'Get External Cache Directories'),
onPressed:
Platform.isIOS ? null : _requestExternalCacheDirectories,
),
),
]),
FutureBuilder<List<Directory>?>(
future: _externalCacheDirectories, builder: _buildDirectories),
],
),
),
);
}
}
18. json_annotation 4.3.0
Defines the annotations used by json_serializable to create code for JSON serialization and deserialization.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation:
First, add json_annotation as a dependency in your pubspec.yaml file.
Usage:
import 'package:json_annotation/json_annotation.dart';
Example:
main code
import 'package:flutter/services.dart';
import 'class/jsonAutoUserClass.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class JsonAutoScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var datajson;
Future<String> loadProductFromAssets() async {
return await rootBundle
.loadString('lib/App/Screen/Json/jsonFile/jsonAutoResponse.json');
}
Future getData() async {
String jsonString = await loadProductFromAssets();
final jsonResponse = json.decode(jsonString);
User rest = User.fromJson(jsonResponse);
setState(() {
datajson = rest;
});
}
@override
void initState() {
super.initState();
getData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Auto Nested Json"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Return Simple json:',
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
const Padding(
padding: EdgeInsets.all(16.0),
),
Text(jsonEncode(datajson), textAlign: TextAlign.center),
Text('NAME = ' + datajson.name, textAlign: TextAlign.center),
Text('EMAIL = ' + datajson.email, textAlign: TextAlign.center),
const Padding(
padding: EdgeInsets.all(16.0),
),
Text('Nested json:',
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
Text('Address = ' + jsonEncode(datajson.address),
textAlign: TextAlign.center),
Text('STREET = ' + datajson.address[0].street,
textAlign: TextAlign.center),
Text('EMAIL = ' + datajson.address[0].city,
textAlign: TextAlign.center),
],
)),
);
}
}
Child code
import 'package:json_annotation/json_annotation.dart';
part 'jsonAutoAddressClass.g.dart';
@JsonSerializable()
class Address {
String street;
String city;
Address(this.street, this.city);
factory Address.fromJson(Map<String, dynamic> json) =>
_$AddressFromJson(json);
Map<String, dynamic> toJson() => _$AddressToJson(this);
}
19. timezone 0.8.0
Flutter plugin provides Time zone database and time zone aware DateTime
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation:
First, add timezone as a dependency in your pubspec.yaml file.
Initialization :
import 'package:timezone/data/latest.dart' as tz;
void main() {
tz.initializeTimeZones();
}
Local Location:
Future<void> setup() async {
await tz.initializeTimeZone();
var detroit = tz.getLocation('America/Detroit');
tz.setLocalLocation(detroit);
}
Get location by Olsen time zone ID:
final detroit = tz.getLocation('America/Detroit');
TimeZone :
var timeInUtc = DateTime.utc(1995, 1, 1);
var timeZone = detroit.timeZone(timeInUtc.millisecondsSinceEpoch);
TimeZone aware DateTime:
var date = tz.TZDateTime(detroit, 2014, 11, 17);
Converting DateTimes between time zones:
var localTime = tz.DateTime(2010, 1, 1);
var detroitTime = tz.TZDateTime.from(time, detroit);
Listing known time zones :
import 'package:timezone/timezone.dart' as tz;
import 'package:timezone/data/latest.dart' as tz;
void main() {
tz.initializeTimeZones();
var locations = tz.timeZoneDatabase.locations;
print(locations.length); // => 429
print(locations.keys.first); // => "Africa/Abidjan"
print(locations.keys.last); // => "US/Pacific"
}
Time Zone databases :
We are using IANA Time Zone Database to build our databases
We currently build three different database variants:
- default (doesn't contain deprecated and historical zones with some exceptions like US/Eastern). 361kb
- all (contains all data from the IANA time zone database). 443kb
- 10y (default database that contains historical data from the last and future 5 years). 85kb
Updating Time Zone databases :
Script for updating Time Zone database, it will automatically download the IANA time zone database and compile into our native format.
$ chmod +x tool/refresh.sh
$ tool/refresh.sh
20. flutter_native_timezone 2.0.0
Flutter plugin for getting the local timezone of the os.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation:
First, add flutter_native_timezone as a dependency in your pubspec.yaml file.
Initialization :
Install this package and everthing good will just follow along with you.
Example :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_native_timezone/flutter_native_timezone.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _timezone = 'Unknown';
List<String> _availableTimezones = <String>[];
@override
void initState() {
super.initState();
_initData();
}
Future<void> _initData() async {
try {
_timezone = await FlutterNativeTimezone.getLocalTimezone();
} catch (e) {
print('Could not get the local timezone');
}
try {
_availableTimezones = await FlutterNativeTimezone.getAvailableTimezones();
_availableTimezones.sort();
} catch (e) {
print('Could not get available timezones');
}
if (mounted) {
setState(() {});
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Local timezone app'),
),
body: Column(
children: <Widget>[
Text('Local timezone: $_timezone\n'),
Text('Available timezones:'),
Expanded(
child: ListView.builder(
itemCount: _availableTimezones.length,
itemBuilder: (_, index) => Text(_availableTimezones[index]),
),
)
],
),
),
);
}
}21. onesignal_flutter 3.2.7
OneSignal is a free email, sms, push notification, and in-app message service for mobile apps. This SDK makes it easy to integrate your Flutter iOS and/or Android apps with OneSignal.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation:
First, add onesignal_flutter as a dependency in your pubspec.yaml file.
Setup Ios:
See the Setup Guide for setup instructions
Setup Android:
buildscript {
repositories {
// ...
maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
}
dependencies {
// ...
// OneSignal-Gradle-Plugin
classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.10, 0.99.99]'
}
}
apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'Usage :
You can now initialize OneSignal using the following code in your main.dart file:
//Remove this method to stop OneSignal Debugging
OneSignal.shared.setLogLevel(OSLogLevel.verbose, OSLogLevel.none);
OneSignal.shared.setAppId("YOUR_ONESIGNAL_APP_ID");
// The promptForPushNotificationsWithUserResponse function will show the iOS push notification prompt. We recommend removing the following code and instead using an In-App Message to prompt for notification permission
OneSignal.shared.promptUserForPushNotificationPermission().then((accepted) {
print("Accepted permission: $accepted");
});Example :
import 'package:flutter/material.dart';
import 'dart:async';
//import OneSignal
import 'package:onesignal_flutter/onesignal_flutter.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _debugLabelString = "";
String? _emailAddress;
String? _smsNumber;
String? _externalUserId;
bool _enableConsentButton = false;
// CHANGE THIS parameter to true if you want to test GDPR privacy consent
bool _requireConsent = true;
@override
void initState() {
super.initState();
initPlatformState();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlatformState() async {
if (!mounted) return;
OneSignal.shared.setLogLevel(OSLogLevel.verbose, OSLogLevel.none);
OneSignal.shared.setRequiresUserPrivacyConsent(_requireConsent);
OneSignal.shared
.setNotificationOpenedHandler((OSNotificationOpenedResult result) {
print('NOTIFICATION OPENED HANDLER CALLED WITH: ${result}');
this.setState(() {
_debugLabelString =
"Opened notification: \n${result.notification.jsonRepresentation().replaceAll("\\n", "\n")}";
});
});
OneSignal.shared
.setNotificationWillShowInForegroundHandler((OSNotificationReceivedEvent event) {
print('FOREGROUND HANDLER CALLED WITH: ${event}');
/// Display Notification, send null to not display
event.complete(null);
this.setState(() {
_debugLabelString =
"Notification received in foreground notification: \n${event.notification.jsonRepresentation().replaceAll("\\n", "\n")}";
});
});
OneSignal.shared
.setInAppMessageClickedHandler((OSInAppMessageAction action) {
this.setState(() {
_debugLabelString =
"In App Message Clicked: \n${action.jsonRepresentation().replaceAll("\\n", "\n")}";
});
});
OneSignal.shared
.setSubscriptionObserver((OSSubscriptionStateChanges changes) {
print("SUBSCRIPTION STATE CHANGED: ${changes.jsonRepresentation()}");
});
OneSignal.shared.setPermissionObserver((OSPermissionStateChanges changes) {
print("PERMISSION STATE CHANGED: ${changes.jsonRepresentation()}");
});
OneSignal.shared.setEmailSubscriptionObserver(
(OSEmailSubscriptionStateChanges changes) {
print("EMAIL SUBSCRIPTION STATE CHANGED ${changes.jsonRepresentation()}");
});
OneSignal.shared.setSMSSubscriptionObserver(
(OSSMSSubscriptionStateChanges changes) {
print("SMS SUBSCRIPTION STATE CHANGED ${changes.jsonRepresentation()}");
});
// NOTE: Replace with your own app ID from https://www.onesignal.com
await OneSignal.shared
.setAppId("380dc082-5231-4cc2-ab51-a03da5a0e4c2");
bool requiresConsent = await OneSignal.shared.requiresUserPrivacyConsent();
this.setState(() {
_enableConsentButton = requiresConsent;
});
// Some examples of how to use In App Messaging public methods with OneSignal SDK
oneSignalInAppMessagingTriggerExamples();
OneSignal.shared.disablePush(false);
// Some examples of how to use Outcome Events public methods with OneSignal SDK
oneSignalOutcomeEventsExamples();
bool userProvidedPrivacyConsent = await OneSignal.shared.userProvidedPrivacyConsent();
print("USER PROVIDED PRIVACY CONSENT: $userProvidedPrivacyConsent");
}
void _handleGetTags() {
OneSignal.shared.getTags().then((tags) {
if (tags == null) return;
setState((() {
_debugLabelString = "$tags";
}));
}).catchError((error) {
setState(() {
_debugLabelString = "$error";
});
});
}
void _handleSendTags() {
print("Sending tags");
OneSignal.shared.sendTag("test2", "val2").then((response) {
print("Successfully sent tags with response: $response");
}).catchError((error) {
print("Encountered an error sending tags: $error");
});
print("Sending tags array");
var sendTags = {'test': 'value'};
OneSignal.shared.sendTags(sendTags).then((response) {
print("Successfully sent tags with response: $response");
}).catchError((error) {
print("Encountered an error sending tags: $error");
});
}
void _handlePromptForPushPermission() {
print("Prompting for Permission");
OneSignal.shared.promptUserForPushNotificationPermission().then((accepted) {
print("Accepted permission: $accepted");
});
}
void _handleGetDeviceState() async {
print("Getting DeviceState");
OneSignal.shared.getDeviceState().then((deviceState) {
print("DeviceState: ${deviceState?.jsonRepresentation()}");
this.setState(() {
_debugLabelString = deviceState?.jsonRepresentation() ?? "Device state null";
});
});
}
void _handleSetEmail() {
if (_emailAddress == null) return;
print("Setting email");
OneSignal.shared.setEmail(email: _emailAddress!).whenComplete(() {
print("Successfully set email");
}).catchError((error) {
print("Failed to set email with error: $error");
});
}
void _handleLogoutEmail() {
print("Logging out of email");
OneSignal.shared.logoutEmail().then((v) {
print("Successfully logged out of email");
}).catchError((error) {
print("Failed to log out of email: $error");
});
}
void _handleSetSMSNumber() {
if (_smsNumber == null) return;
print("Setting SMS Number");
OneSignal.shared.setSMSNumber(smsNumber: _smsNumber!).then((response) {
print("Successfully set SMSNumber with response $response");
}).catchError((error) {
print("Failed to set SMS Number with error: $error");
});
}
void _handleLogoutSMSNumber() {
print("Logging out of smsNumber");
OneSignal.shared.logoutSMSNumber().then((response) {
print("Successfully logoutEmail with response $response");
}).catchError((error) {
print("Failed to log out of SMSNumber: $error");
});
}
void _handleConsent() {
print("Setting consent to true");
OneSignal.shared.consentGranted(true);
print("Setting state");
this.setState(() {
_enableConsentButton = false;
});
}
void _handleSetLocationShared() {
print("Setting location shared to true");
OneSignal.shared.setLocationShared(true);
}
void _handleDeleteTag() {
print("Deleting tag");
OneSignal.shared.deleteTag("test2").then((response) {
print("Successfully deleted tags with response $response");
}).catchError((error) {
print("Encountered error deleting tag: $error");
});
print("Deleting tags array");
OneSignal.shared.deleteTags(['test']).then((response) {
print("Successfully sent tags with response: $response");
}).catchError((error) {
print("Encountered an error sending tags: $error");
});
}
void _handleSetExternalUserId() {
print("Setting external user ID");
if (_externalUserId == null) return;
OneSignal.shared.setExternalUserId(_externalUserId!).then((results) {
if (results == null) return;
this.setState(() {
_debugLabelString = "External user id set: $results";
});
});
}
void _handleRemoveExternalUserId() {
OneSignal.shared.removeExternalUserId().then((results) {
if (results == null) return;
this.setState(() {
_debugLabelString = "External user id removed: $results";
});
});
}
void _handleSendNotification() async {
var deviceState = await OneSignal.shared.getDeviceState();
if (deviceState == null || deviceState.userId == null)
return;
var playerId = deviceState.userId!;
var imgUrlString =
"http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg";
var notification = OSCreateNotification(
playerIds: [playerId],
content: "this is a test from OneSignal's Flutter SDK",
heading: "Test Notification",
iosAttachments: {"id1": imgUrlString},
bigPicture: imgUrlString,
buttons: [
OSActionButton(text: "test1", id: "id1"),
OSActionButton(text: "test2", id: "id2")
]);
var response = await OneSignal.shared.postNotification(notification);
this.setState(() {
_debugLabelString = "Sent notification with response: $response";
});
}
void _handleSendSilentNotification() async {
var deviceState = await OneSignal.shared.getDeviceState();
if (deviceState == null || deviceState.userId == null)
return;
var playerId = deviceState.userId!;
var notification = OSCreateNotification.silentNotification(
playerIds: [playerId], additionalData: {'test': 'value'});
var response = await OneSignal.shared.postNotification(notification);
this.setState(() {
_debugLabelString = "Sent notification with response: $response";
});
}
oneSignalInAppMessagingTriggerExamples() async {
/// Example addTrigger call for IAM
/// This will add 1 trigger so if there are any IAM satisfying it, it
/// will be shown to the user
OneSignal.shared.addTrigger("trigger_1", "one");
/// Example addTriggers call for IAM
/// This will add 2 triggers so if there are any IAM satisfying these, they
/// will be shown to the user
Map<String, Object> triggers = new Map<String, Object>();
triggers["trigger_2"] = "two";
triggers["trigger_3"] = "three";
OneSignal.shared.addTriggers(triggers);
// Removes a trigger by its key so if any future IAM are pulled with
// these triggers they will not be shown until the trigger is added back
OneSignal.shared.removeTriggerForKey("trigger_2");
// Get the value for a trigger by its key
Object? triggerValue = await OneSignal.shared.getTriggerValueForKey("trigger_3");
print("'trigger_3' key trigger value: ${triggerValue?.toString()}");
// Create a list and bulk remove triggers based on keys supplied
List<String> keys = ["trigger_1", "trigger_3"];
OneSignal.shared.removeTriggersForKeys(keys);
// Toggle pausing (displaying or not) of IAMs
OneSignal.shared.pauseInAppMessages(false);
}
oneSignalOutcomeEventsExamples() async {
// Await example for sending outcomes
outcomeAwaitExample();
// Send a normal outcome and get a reply with the name of the outcome
OneSignal.shared.sendOutcome("normal_1");
OneSignal.shared.sendOutcome("normal_2").then((outcomeEvent) {
print(outcomeEvent.jsonRepresentation());
});
// Send a unique outcome and get a reply with the name of the outcome
OneSignal.shared.sendUniqueOutcome("unique_1");
OneSignal.shared.sendUniqueOutcome("unique_2").then((outcomeEvent) {
print(outcomeEvent.jsonRepresentation());
});
// Send an outcome with a value and get a reply with the name of the outcome
OneSignal.shared.sendOutcomeWithValue("value_1", 3.2);
OneSignal.shared.sendOutcomeWithValue("value_2", 3.9).then((outcomeEvent) {
print(outcomeEvent.jsonRepresentation());
});
}
Future<void> outcomeAwaitExample() async {
var outcomeEvent = await OneSignal.shared.sendOutcome("await_normal_1");
print(outcomeEvent.jsonRepresentation());
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('OneSignal Flutter Demo'),
backgroundColor: Color.fromARGB(255, 212, 86, 83),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: SingleChildScrollView(
child: new Table(
children: [
new TableRow(children: [
new OneSignalButton(
"Get Tags", _handleGetTags, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton(
"Send Tags", _handleSendTags, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Prompt for Push Permission",
_handlePromptForPushPermission, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton(
"Print Device State",
_handleGetDeviceState,
!_enableConsentButton)
]),
new TableRow(children: [
new TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Email Address",
labelStyle: TextStyle(
color: Color.fromARGB(255, 212, 86, 83),
)),
onChanged: (text) {
this.setState(() {
_emailAddress = text == "" ? null : text;
});
},
)
]),
new TableRow(children: [
Container(
height: 8.0,
)
]),
new TableRow(children: [
new OneSignalButton(
"Set Email", _handleSetEmail, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Logout Email", _handleLogoutEmail,
!_enableConsentButton)
]),
new TableRow(children: [
new TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "SMS Number",
labelStyle: TextStyle(
color: Color.fromARGB(255, 212, 86, 83),
)),
onChanged: (text) {
this.setState(() {
_smsNumber = text == "" ? null : text;
});
},
)
]),
new TableRow(children: [
Container(
height: 8.0,
)
]),
new TableRow(children: [
new OneSignalButton(
"Set SMS Number", _handleSetSMSNumber, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Logout SMS Number", _handleLogoutSMSNumber,
!_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Provide GDPR Consent", _handleConsent,
_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Set Location Shared",
_handleSetLocationShared, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton(
"Delete Tag", _handleDeleteTag, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Post Notification",
_handleSendNotification, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton("Post Silent Notification",
_handleSendSilentNotification, !_enableConsentButton)
]),
new TableRow(children: [
new TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "External User ID",
labelStyle: TextStyle(
color: Color.fromARGB(255, 212, 86, 83),
)),
onChanged: (text) {
this.setState(() {
_externalUserId = text == "" ? null : text;
});
},
)
]),
new TableRow(children: [
Container(
height: 8.0,
)
]),
new TableRow(children: [
new OneSignalButton(
"Set External User ID", _handleSetExternalUserId, !_enableConsentButton)
]),
new TableRow(children: [
new OneSignalButton(
"Remove External User ID", _handleRemoveExternalUserId, !_enableConsentButton)
]),
new TableRow(children: [
new Container(
child: new Text(_debugLabelString),
alignment: Alignment.center,
)
]),
],
),
),
)),
);
}
}
typedef void OnButtonPressed();
class OneSignalButton extends StatefulWidget {
final String title;
final OnButtonPressed onPressed;
final bool enabled;
OneSignalButton(this.title, this.onPressed, this.enabled);
State<StatefulWidget> createState() => new OneSignalButtonState();
}
class OneSignalButtonState extends State<OneSignalButton> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Table(
children: [
new TableRow(children: [
new FlatButton(
disabledColor: Color.fromARGB(180, 212, 86, 83),
disabledTextColor: Colors.white,
color: Color.fromARGB(255, 212, 86, 83),
textColor: Colors.white,
padding: EdgeInsets.all(8.0),
child: new Text(widget.title),
onPressed: widget.enabled ? widget.onPressed : null,
)
]),
new TableRow(children: [
Container(
height: 8.0,
)
]),
],
);
}
}22. rxdart 0.27.3
Flutter plugin for implementation of the popular reactiveX api for asynchronous programming, leveraging the native Dart Streams api.
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️
Installation:
First, add rxdart as a dependency in your pubspec.yaml file.
How To Use RxDart:
import 'package:rxdart/rxdart.dart';
void main() {
const konamiKeyCodes = <int>[
KeyCode.UP,
KeyCode.UP,
KeyCode.DOWN,
KeyCode.DOWN,
KeyCode.LEFT,
KeyCode.RIGHT,
KeyCode.LEFT,
KeyCode.RIGHT,
KeyCode.B,
KeyCode.A,
];
final result = querySelector('#result')!;
document.onKeyUp
.map((event) => event.keyCode)
.bufferCount(10, 1) // An extension method provided by rxdart
.where((lastTenKeyCodes) => const IterableEquality<int>().equals(lastTenKeyCodes, konamiKeyCodes))
.listen((_) => result.innerHtml = 'KONAMI!');
}API Overview:
RxDart adds functionality to Dart Streams in three ways:
- Stream Classes - create Streams with specific capabilities, such as combining or merging many Streams.
- Extension Methods - transform a source Stream into a new Stream with different capabilities, such as throttling or buffering events.
- Subjects - StreamControllers with additional powers
Example :
import 'package:rxdart/rxdart.dart';
/// generate n-amount of fibonacci numbers
///
/// for example: dart fibonacci.dart 10
/// outputs:
/// 1: 1
/// 2: 1
/// 3: 2
/// 4: 3
/// 5: 5
/// 6: 8
/// 7: 13
/// 8: 21
/// 9: 34
/// 10: 55
/// done!
void main(List<String> arguments) {
// read the command line argument, if none provided, default to 10
var n = (arguments.length == 1) ? int.parse(arguments.first) : 10;
// seed value: this value will be used as the
// starting value for the [scan] method
const seed = IndexedPair(1, 1, 0);
Rx
// amount of numbers to compute
.range(1, n)
// accumulator: computes a new accumulated
// value each time a [Stream] event occurs
// in this case, the accumulated value is always
// the latest Fibonacci number
.scan((IndexedPair seq, _, __) => IndexedPair.next(seq), seed)
// finally, print the output
.listen(print, onDone: () => print('done!'));
}
class IndexedPair {
final int n1, n2, index;
const IndexedPair(this.n1, this.n2, this.index);
factory IndexedPair.next(IndexedPair prev) => IndexedPair(
prev.n2, prev.index <= 1 ? prev.n1 : prev.n1 + prev.n2, prev.index + 1);
@override
String toString() => '$index: $n2';
}23. sqflite ^2.0.0+3
SQLite plugin for Flutter. Supports iOS, Android and MacOS.
- Support transactions and batches
- Automatic version managment during open
- Helpers for insert/query/update/delete queries
- DB operation executed in a background thread on iOS and Android
Platform Support
Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️
Installation:
First, add sqflite as a dependency in your pubspec.yaml file.
Usage:
import 'package:sqflite/sqflite.dart';Opening a database:
var db = await openDatabase('my_db.db');
var db = await openDatabase('my_db.db');Close a database:
await db.close();
Example :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:sqflite_example/batch_test_page.dart';
import 'package:sqflite_example/deprecated_test_page.dart';
import 'package:sqflite_example/exception_test_page.dart';
import 'package:sqflite_example/exp_test_page.dart';
import 'package:sqflite_example/manual_test_page.dart';
import 'package:sqflite_example/src/dev_utils.dart';
import 'model/main_item.dart';
import 'open_test_page.dart';
import 'raw_test_page.dart';
import 'slow_test_page.dart';
import 'src/main_item_widget.dart';
import 'todo_test_page.dart';
import 'type_test_page.dart';
void main() {
runApp(const MyApp());
}
/// Sqflite test app
class MyApp extends StatefulWidget {
/// test app.
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
_MyAppState createState() => _MyAppState();
}
/// Simple test page.
const String testRawRoute = '/test/simple';
/// Open test page.
const String testOpenRoute = '/test/open';
/// Slow test page.
const String testSlowRoute = '/test/slow';
/// Type test page.
const String testTypeRoute = '/test/type';
/// Batch test page.
const String testBatchRoute = '/test/batch';
/// `todo` example test page.
const String testTodoRoute = '/test/todo';
/// Exception test page.
const String testExceptionRoute = '/test/exception';
/// Manual test page.
const String testManualRoute = '/test/manual';
/// Experiment test page.
const String testExpRoute = '/test/exp';
/// Deprecated test page.
const String testDeprecatedRoute = '/test/deprecated';
class _MyAppState extends State<MyApp> {
var routes = <String, WidgetBuilder>{
'/test': (BuildContext context) => MyHomePage(),
testRawRoute: (BuildContext context) => RawTestPage(),
testOpenRoute: (BuildContext context) => OpenTestPage(),
testSlowRoute: (BuildContext context) => SlowTestPage(),
testTodoRoute: (BuildContext context) => TodoTestPage(),
testTypeRoute: (BuildContext context) => TypeTestPage(),
testManualRoute: (BuildContext context) => const ManualTestPage(),
testBatchRoute: (BuildContext context) => BatchTestPage(),
testExceptionRoute: (BuildContext context) => ExceptionTestPage(),
testExpRoute: (BuildContext context) => ExpTestPage(),
testDeprecatedRoute: (BuildContext context) => DeprecatedTestPage(),
};
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sqflite Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with 'flutter run'. You'll see
// the application has a blue toolbar. Then, without quitting
// the app, try changing the primarySwatch below to Colors.green
// and then invoke 'hot reload' (press 'r' in the console where
// you ran 'flutter run', or press Run > Hot Reload App in IntelliJ).
// Notice that the counter didn't reset back to zero -- the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Sqflite Demo Home Page'),
routes: routes);
}
}
/// App home menu page.
class MyHomePage extends StatefulWidget {
/// App home menu page.
MyHomePage({Key? key, this.title}) : super(key: key) {
_items.add(
MainItem('Raw tests', 'Raw SQLite operations', route: testRawRoute));
_items.add(MainItem('Open tests', 'Open onCreate/onUpgrade/onDowngrade',
route: testOpenRoute));
_items
.add(MainItem('Type tests', 'Test value types', route: testTypeRoute));
_items.add(MainItem('Batch tests', 'Test batch operations',
route: testBatchRoute));
_items.add(
MainItem('Slow tests', 'Lengthy operations', route: testSlowRoute));
_items.add(MainItem(
'Todo database example', 'Simple Todo-like database usage example',
route: testTodoRoute));
_items.add(MainItem('Exp tests', 'Experimental and various tests',
route: testExpRoute));
_items.add(MainItem('Exception tests', 'Tests that trigger exceptions',
route: testExceptionRoute));
_items.add(MainItem('Manual tests', 'Tests that requires manual execution',
route: testManualRoute));
_items.add(MainItem('Deprecated test',
'Keeping some old tests for deprecated functionalities',
route: testDeprecatedRoute));
// Uncomment to view all logs
//Sqflite.devSetDebugModeOn(true);
}
final List<MainItem> _items = [];
/// Page title.
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
String? _debugAutoStartRouteName;
/// (debug) set the route to start with.
String? get debugAutoStartRouteName => _debugAutoStartRouteName;
/// Deprecated to avoid calls
@Deprecated('Deb only')
set debugAutoStartRouteName(String? routeName) =>
_debugAutoStartRouteName = routeName;
class _MyHomePageState extends State<MyHomePage> {
int get _itemCount => widget._items.length;
@override
void initState() {
super.initState();
Future.delayed(Duration.zero).then((_) async {
if (mounted) {
// Use it to auto start a test page
if (debugAutoStartRouteName != null) {
// only once
// await Navigator.of(context).pushNamed(testExpRoute);
// await Navigator.of(context).pushNamed(testRawRoute);
final future =
Navigator.of(context).pushNamed(debugAutoStartRouteName!);
// ignore: deprecated_member_use_from_same_package
debugAutoStartRouteName = null;
await future;
// await Navigator.of(context).pushNamed(testExceptionRoute);
}
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Center(
child: Text('Sqflite demo', textAlign: TextAlign.center)),
),
body:
ListView.builder(itemBuilder: _itemBuilder, itemCount: _itemCount));
}
//new Center(child: new Text('Running on: $_platformVersion\n')),
Widget _itemBuilder(BuildContext context, int index) {
return MainItemWidget(widget._items[index], (MainItem item) {
Navigator.of(context).pushNamed(item.route!);
});
}
}Reference
- https://pub.dev/packages/path
- https://pub.dev/packages/flutter_dotenv/example
- https://pub.dev/packages/device_info_plus
- https://pub.dev/packages/lottie
- https://pub.dev/packages/carousel_slider
- https://pub.dev/packages/image_picker
- https://pub.dev/packages/flutter_markdown
- https://pub.dev/packages/awesome_dialog/example
- https://pub.dev/packages/flutter_datetime_picker
- https://pub.dev/packages/pdf_render/example
- https://pub.dev/packages/flutter_rating_bar/example
- https://pub.dev/packages/webview_flutter
- https://pub.dev/packages/url_launcher
- https://pub.dev/packages/share_plus
- https://pub.dev/packages/version_check
- https://pub.dev/packages/simple_moment
- https://pub.dev/packages/path_provider
- https://pub.dev/packages/json_annotation
- https://pub.dev/packages/timezone
- https://pub.dev/packages/flutter_native_timezone
- https://pub.dev/packages/onesignal_flutter
- https://pub.dev/packages/rxdart
- https://pub.dev/packages/sqflite
Comments
Post a Comment