Deploy docusaurus site (generated build files) offline inside flutter webview - flutter

I just started develop a website using docusaurus and I want to run this website within flutter on mobile (android or ios) ,I thought of running the build files (index.html) through flutter webview, but by search i found it diffucult to run docusaurus site without webserver, I have tried way to host a local build of an docusaurus website in flutter webview by use local_assets_server flutter library
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:local_assets_server/local_assets_server.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Local Assets Server Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Local Assets Server Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isListening = false;
String? address;
int? port;
WebViewController? controller;
void _incrementCounter() {
controller?.evaluateJavascript('window.increment()');
}
#override
initState() {
_initServer();
super.initState();
}
_initServer() async {
final server = new LocalAssetsServer(
address: InternetAddress.loopbackIPv4,
assetsBasePath: 'web',
logger: DebugLogger(),
);
final address = await server.serve();
setState(() {
this.address = address.address;
port = server.boundPort!;
isListening = true;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: isListening
? WebView(
debuggingEnabled: true,
initialUrl: 'http://$address:$port',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (c) {
controller = c;
},
)
: Center(child: CircularProgressIndicator()),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
but flutter webview give this message

Related

flutter reactive ble problem trying to connect to specific device

flutter_reactive_ble code for the main page which will connect to a device name "BT05" when we press the button and send a string value "B" and receive the value response from the device and print it on the screen, I have posted my code here as well for reference but I don't know what I'm doing wrong here, please help me with this as I'm stuck for long enough now and tried many ways to it. i have also used some other flutter libraries but none of them worked well
import 'package:flutter_reactive_ble/flutter_reactive_ble.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 Reactive BLE',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Reactive BLE'),
);
}
}
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> {
String _deviceName = "BT05";
String _value = "B";
String _responseValue = "";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter BLE Demo'),
),
body: Column(
children: <Widget>[
ElevatedButton(
child: Text('Connect to $_deviceName'),
onPressed: () async {
// Connect to device
final stateUpdate = await FlutterReactiveBle.instance
.connectToDevice(_deviceName);
stateUpdate.listen((s) {
if (s == ConnectionState.disconnected) {
// Disconnected state
} else if (s == ConnectionState.connected) {
// Connected state
// Send value
FlutterReactiveBle.instance
.writeCharacteristic(_deviceName, _value)
.then((value) {
// Response value
_responseValue = value;
});
}
});
},
),
Text('Response value: $_responseValue')
],
),
);
}
}

How to write test for flutter package Flutter WeChat Assets Picker

I am trying to write a test on this flutter package https://pub.dev/packages/wechat_assets_picker using the Mocktail package https://pub.dev/packages/mocktail, but this package does not seem to have test in the documentation.
I have included the minimum reproducible example. The test file is currently not working, it is included as an example test code using the flutter Mocktail package.
It is supposed to mock AssetPicker.pickAssets to test whether it is actually called with the correct arguments. I am running in IOS simulator, we will need to add this key in ios/Runer/Info.plist, otherwise the simulator will close unexpectedly after clicking the add button.
main.dart
import 'package:flutter/material.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
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: const [],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
final List<AssetEntity>? result =
await AssetPicker.pickAssets(context);
},
tooltip: 'Add photo',
child: const Icon(Icons.add),
),
);
}
}
widget_test.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';
import 'package:wechat/main.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
class _MockAssetPicker extends Mock implements AssetPicker {}
void main() {
testWidgets('It should call the WeChat asset picker',
(WidgetTester tester) async {
await tester.pumpWidget(const MyApp());
final BuildContext context = tester.element(find.byType(MyApp));
final assetPickerMock = _MockAssetPicker();
when(() => assetPickerMock.pickAssets(context)).thenAnswer((_) => Future.value([
const AssetEntity(
id: 'id1',
typeInt: 1,
width: 100,
height: 100,
),
]));
AssetPicker.instance = assetPickerMock;
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
verify(() => assetPickerMock.pickAssets(context)).called(1);
});
}
Mocking the picker is supported by the separated picker delegate: https://github.com/fluttercandies/flutter_wechat_assets_picker/pull/315
TL;DR, build your own delegate first, then set it through AssetPicker.setPickerDelegate(TestAssetPickerDelegate());

Run native code when triggering alarms with flutter

I have an example that implements an example of Android Alarm Manager with flutter, the event is called normal, however, I want that when the alarm goes off, a native code (Java or Kt) is executed.
Example:
As soon as the alarm goes off even in the background or locked screen, the app will execute my code in Java.
In native Java we created a class that inherits from BroadcastReceiver and implements the onReceive method, in Android Native I would open my app even in the background with native code.
How can I get the flutter to call my native code to run when the alarm is triggered?
My code example:
import 'package:flutter/material.dart';
import 'package:android_alarm_manager/android_alarm_manager.dart';
import 'package:android_intent/android_intent.dart';
import 'package:android_intent/flag.dart';
import 'package:platform/platform.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await AndroidAlarmManager.initialize();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Alarme app',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Alarme'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
void _openLinkInGoogleChrome() {
print('entered');
if (const LocalPlatform().isAndroid) {
// **run Native code java here that implemented onReceive on class .java or .kt !!!**
}
}
class _MyHomePageState extends State<MyHomePage> {
void adicionarAlarme(BuildContext context) async {
await AndroidAlarmManager.periodic(
const Duration(seconds: 3), 0, _openLinkInGoogleChrome);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Clique no botão abaixo para adicionar um alarme',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => adicionarAlarme(context),
tooltip: 'Adicionar alarme',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

How can I play local mp3 on flutter web?

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),
),
);
}
}

Flutter / webview_flutter too big to fit screen

I am running flutter 1.17.1, using webview_flutter: ^0.3.21
dependencies added to pubspec.yaml and added this to the end of info.plist
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
Problem: Webpage loaded into webview is too big to fit mobile phone screen.
screenshot
Here is the code with the webview:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewContainer extends StatefulWidget {
final url;
WebViewContainer(this.url);
#override
createState() => _WebViewContainerState(this.url);
}
class _WebViewContainerState extends State<WebViewContainer> {
var _url;
final _key = UniqueKey();
_WebViewContainerState(this._url);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Expanded(
child: WebView(
key: _key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: _url))
],
));
}
}
Link to the full app:
https://github.com/bi-samson/mreader
I've tried a minimal repro with the url "https://www.businessinsider.jp/" and the latest version of webview_flutter, this is the output:
Minimal repro:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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();
}
class _MyHomePageState extends State<MyHomePage> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: WebView(
initialUrl: "https://www.businessinsider.jp/",
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
javascriptMode: JavascriptMode.unrestricted,
),
);
}
}
It seems that the issue doesn't occur in the latest version.
Use InAppWebView instead of WebView.
This will add a line like this to your package's pubspec.yaml:
dependencies:
flutter_inappwebview: ^5.3.2
Here is a code example:
return InAppWebView(
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
useHybridComposition: true,
textZoom: 100 * 2 // it makes 2 times bigger
)
),
onWebViewCreated: (InAppWebViewController controller) {
webViewController = controller;
controller.loadData(data: widget.html, mimeType: "text/html");
},
);
If you want to make it smaller, you just need to divide it as below:
textZoom: 100 / 2 // it makes 2 times smaller