I am coding a PDF on flutter using 'syncfusion_flutter_pdfviewer' library. I tried everything but always I receive the same error message:
Next code I'm trying
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
void main() {
runApp(MaterialApp(
title: 'Syncfusion PDF Viewer Demo',
home: HomePage(),
));
}
/// Represents Homepage for Navigation
class HomePage extends StatefulWidget {
#override
_HomePage createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter PDF Viewer'),
actions: <Widget>[
IconButton(
icon: const Icon(
Icons.bookmark,
color: Colors.white,
semanticLabel: 'Bookmark',
),
onPressed: () {
_pdfViewerKey.currentState?.openBookmarkView();
},
),
],
),
body: SfPdfViewer.network(
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
key: _pdfViewerKey,
),
);
}
}
Had a similar problem and it turned out to be a mismatch between plugin version and flutter version. (I went back and forth to a new Flutter version).
Wrote a more detailed answer here: Flutter completely broken after update (again)
Also - the syncfusion support proved very useful for this
Related
I'm currently working on a Flutter project. I have been given Icons by the designer.
One of the Icons looks like this
Now I'd like to fill the inside of the Icon with color so that it looks like this
How can I achieve this in flutter? I really tried a lot. Like using ClipRect and other Classes. But none gave the desired results.
Try this one.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
bool _isBluetoothOn = false;
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
onPressed: () async {
print(_isBluetoothOn);
setState(() {
_isBluetoothOn = !_isBluetoothOn;
});
print(_isBluetoothOn);
},
icon: Icon(
_isBluetoothOn ? Icons.favorite : Icons.favorite_border,
color: Colors.greenAccent,
size: 40,
),
),
],
),
),
);
}
}
You can simply ask designer for filled icons too and show them when they are clicked.
So it goes like this:
if button clicked:
show filledIcon
else:
show unfilledIcon
You can code that in Flutter like:
icon:clicked? Icon(filledIcon):Icon(unfilledIcon)
This is the easiest way to do this.
Does anybody know why the Geolocation.getCurrentPosition() from dart:html doesn't work when running in release mode with sound null safety enabled (flutter run --release -d chrome)?
When making this call I do get an instance of Geoposition back but when I try to access one of it's members I get the following error message:
Uncaught TypeError: n.grq is not a function
at main.dart:39
at WD.a (async_patch.dart:316)
at WD.$2 (async_patch.dart:341)
at VR.$1 (async_patch.dart:292)
at UG.SB (zone.dart:1612)
at UG.ug (zone.dart:1611)
at Tf.$0 (future_impl.dart:118)
at Object.n3 (future_impl.dart:733)
at Y.ib (future_impl.dart:539)
at T7.$0 (future_impl.dart:577)
If I run the same code in debug (flutter run -d chrome or without NNBD flutter run -d chrome --release --no-sound-null-safety everything works fine). A simple App that reproduces this behaviour looks like this (it's a slightly changed version of the default Flutter counter template):
import 'dart:html' as html;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
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 _position = "Unknown";
Future<void> _currentPosition() async {
final geolocation = html.window.navigator.geolocation;
final position = await geolocation.getCurrentPosition();
final latitude = position.coords?.latitude ?? 'n/a';
final longitude = position.coords?.longitude ?? 'n/a';
setState(() {
_position =
'Latitude: $latitude, Longitude: $longitude';
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title!),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Your current position is:',
),
Text(
'$_position',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _currentPosition,
tooltip: 'Current position',
child: Icon(Icons.location_on),
),
);
}
}
This turns out to be a bug in Dart. I have created a bug report which can be tracked here: https://github.com/dart-lang/sdk/issues/45562
I need to open and save simple text files that may be on the device. For example in Documents, Downloads, etc. Wherever files are available for other programs, in android terminology it is "External Storage"
path_provider provides several methods. One of them getExternalStorageDirectory(). The android documentation says:
This method was deprecated in API level 29. To improve user privacy,
direct access to shared/external storage devices is deprecated. When
an app targets Build.VERSION_CODES.Q link
If I use methods path_provider
getExternalStorageDirectory() → /storage/emulated/0/Android/data/myapp.name/files
getApplicationDocumentsDirectory() → /data/user/0/myapp.name/app_flutter
getExternalStorageDirectories(type: StorageDirectory.documents) return List which contains
/storage/emulated/0/Android/data/myapp.name/files/Documents
/storage/1CEE-4019/Android/data/myapp.name/files/Documents
On my android emulator (Api 30) real external documents are located at
/storage/emulated/0/Documents
/storage/emulated/0/Download
How can I access them? As I understand it, there are no alternatives forpath_provider
you va use external_path package
You can copy paste run full code below
You can use package https://pub.dev/packages/ext_storage
code snippet
String pathDownload = await ExtStorage.getExternalStoragePublicDirectory(
ExtStorage.DIRECTORY_DOWNLOADS);
print(pathDownload);
String pathDoc = await ExtStorage.getExternalStoragePublicDirectory(
ExtStorage.DIRECTORY_DOCUMENTS);
print(pathDoc);
output
I/flutter ( 7361): /storage/emulated/0/Download
I/flutter ( 7361): /storage/emulated/0/Documents
full code
import 'package:flutter/material.dart';
import 'package:ext_storage/ext_storage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() async {
String pathDownload = await ExtStorage.getExternalStoragePublicDirectory(
ExtStorage.DIRECTORY_DOWNLOADS);
print(pathDownload);
String pathDoc = await ExtStorage.getExternalStoragePublicDirectory(
ExtStorage.DIRECTORY_DOCUMENTS);
print(pathDoc);
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
I try a lot packages, but no one can play a mp3 file from local file...
users can chiose a file from systerm
_myFile = await FilePickerCross.importFromStorage(
type: FileTypeCross.audio,
);
then , how can i play it on flutter web page ?
usually crash:
Error: NotSupportedError: Failed to load because no supported source was found.
at Object.createErrorWithStack (http://localhost:62567/dart_sdk.js:4352:12)
at Object._rethrow (http://localhost:62567/dart_sdk.js:38191:16)
at async._AsyncCallbackEntry.new.callback (http://localhost:62567/dart_sdk.js:38185:13)
at Object._microtaskLoop (http://localhost:62567/dart_sdk.js:38017:13)
at _startMicrotaskLoop (http://localhost:62567/dart_sdk.js:38023:13)
at http://localhost:62567/dart_sdk.js:33520:9
like this https://github.com/florent37/Flutter-AssetsAudioPlayer/issues/383
so can any way to play local mp3 file on flutter web?
You can use audioplayers package.
To play audio from local file :
AudioPlayer audioPlayer = AudioPlayer();
playLocal() async {
int result = await audioPlayer.play(localPath, isLocal: true);
}
For a detailed info please take a look at package documentation:
https://pub.dev/packages/audioplayers
You can copy paste run full code below
The following demo code has well tested on flutter web
you can use package https://pub.dev/packages/soundpool and call _soundpool.loadAndPlayUint8List(_myFile.toUint8List());
code snippet
Soundpool _soundpool;
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
_soundpool = Soundpool();
...
FilePickerCross _myFile = await FilePickerCross.importFromStorage(
type: FileTypeCross.audio,
);
_soundpool.loadAndPlayUint8List(_myFile.toUint8List());
full code
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker_cross/file_picker_cross.dart';
import 'package:soundpool/soundpool.dart';
Soundpool _soundpool;
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
_soundpool = Soundpool();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() async {
FilePickerCross _myFile = await FilePickerCross.importFromStorage(
type: FileTypeCross.audio,
);
_soundpool.loadAndPlayUint8List(_myFile.toUint8List());
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
i am new to flutter and would like someone to help me with code i found in github that i would like to use. take a look at the link below
https://github.com/JohannesMilke/drawer_example
this is an example of a navigational drawer. i like the way the developer coded it and would like to use this example. the problem is that the developer didnt implement navigating to another page. when you click on item in the drawer, it just print a message in the console.
i want to take this a step further. i want to modified the code so that when you click on a item it will navigate to another page and the drawer will b closed. the drawer icon should remain on the toolbar on the new page displayed. also, when you navigate to another page the title of that page should be set in the toolbar.
when i looked at the code , i have an idea where to change but i am not successful. i think i need to change the body tag at the bottom of the code. the problem is that i dont know how to call the DrawerWidgetState class in drawer_widget.dart file.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final String appTitle = 'Ttitle';
#override
Widget build(BuildContext context) => MaterialApp(
title: appTitle,
theme: ThemeData(
primaryColor: Colors.red,
textTheme: TextTheme(
subhead: TextStyle(
color: Colors.black.withOpacity(0.4),
),
),
dividerColor: Colors.black.withOpacity(0.4),
),
home: MainPage(appTitle: appTitle),
);
}
class MainPage extends StatefulWidget {
final String appTitle;
const MainPage({this.appTitle});
#override
MainPageState createState() => MainPageState();
}
class MainPageState extends State<MainPage> {
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text(widget.appTitle),
),
drawer: DrawerWidget(),
body: container()
);
}
i define the following function in drawer_widget.dart file
getDrawerItemWidget(int pos) {
print('testing');
switch (pos) {
case 0:
return new FirstFragment();
case 1:
return new SecondFragment();
case 2:
return new ThirdFragment();
default:
return new Text("Error");
}
}
but i dont know how to call it from Mainpage Body tag and set title accordingly. can someone help modify the code so that i can nagivate to another page and set title? full code is in
https://github.com/JohannesMilke/drawer_example
thanks in advance
Using the drawer_example library you need to make some small changes in order to make it work.
Over your drawer_widget.dart add this add the beginning:
typedef TitleCallback = void Function(String, int);
Once you do that, your Drawer StatefulWidget should looks this way:
class DrawerWidget extends StatefulWidget {
final TitleCallback callback;
final int tabIndex;
#override
DrawerWidgetState createState() => DrawerWidgetState();
DrawerWidget(this.callback, this.tabIndex);
}
and your initState:
#override
void initState() {
selectedDrawerIndex = widget.tabIndex;
selectedProfileIndex = 0;
super.initState();
}
This will be the constructor to pass the new value back to your main.dart file.
Inside the ListTile, you can add the following logic:
ListTile(
leading: Icon(item.icon),
title: Text(item.name),
selected: selectedDrawerIndex == currentIndex,
onTap: () {
final item = getOffsetIndex(drawerGroups, currentIndex);
print('Selected index $selectedDrawerIndex with name ${item.name}');
setState(() {
selectedDrawerIndex = currentIndex;
widget.callback(item.name, selectedDrawerIndex);
});
Navigator.pop(context); // to close the Drawer
},
)
If you can check, the line: widget.callback(item.name); sends the tab name over the callback and that logic can be applied any where you want to change your title. It can even be a hard coded title like:
widget.callback("Second Tab");
Now, going back to your main.dart file:
class MyApp extends StatefulWidget {
final String title;
ListExample(this.title);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<Widget> _fragments = <Widget> [
Container(
child: Text("Fragment One"),
),
Container(
child: Text("Fragment Two"),
),
Container(
child: Text("Fragment Three"),
),
];
String titleAppBar = "Testing";
int tabIndex = 0;
#override
void initState() {
setState(() {
titleAppBar = widget.title;
});
super.initState();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: widget.title,
home: Scaffold(
appBar: AppBar(
title: Text(titleAppBar),
),
drawer: DrawerWidget((title, index) {
setState(() {
titleAppBar = title;
tabIndex = index;
});
}, tabIndex),
body: _fragments[tabIndex],
),
);
}
}
Final Result:
Looking at the example on GitHub, it's overcomplicating something that's too easy with Flutter.
Here's a simple example on how to use a Drawer on Flutter:
main.dart
import 'package:flutter/material.dart';
import 'another_page.dart';
import 'home_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// declaring your routes will allow you to push and remove everything from the stack (including the drawer) with pushNamedAndRemoveUntil()
routes: {
'home': (context) => HomePage(),
'anotherPage': (context) => AnotherPage(),
},
initialRoute: 'home',
);
}
}
home_page.dart (another_page.dart is exactly the same for illustration purpose)
import 'package:flutter/material.dart';
import 'menu_drawer.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: MenuDrawer(),
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text('Home'),
),
);
}
}
menu_drawer.dart
import 'package:flutter/material.dart';
class MenuDrawer extends StatelessWidget {
// Push the page and remove everything else
navigateToPage(BuildContext context, String page) {
Navigator.of(context).pushNamedAndRemoveUntil(page, (Route<dynamic> route) => false);
}
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
// This could be mapped from a List of items
children: <Widget>[
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () => navigateToPage(context, 'home'),
),
ListTile(
leading: Icon(Icons.panorama),
title: Text('Another page'),
onTap: () => navigateToPage(context, 'anotherPage'),
),
],
),
);
}
}
Final result: