Flutter Webview : Alternate screen for inital url not loaded - flutter

I need an alternate screen when my webpage not loaded;
Note: Webpage was hosting on localhost, so internet connectivity based changeover not possible.
Query: Can we ping IP and change over the screens
Any Possible ways to achieve this ?
** main.dart **
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'flutter webview',
home: Scaffold(
appBar: AppBar(
title: const Text('flutter webview'),
),
body: WebView(
initialUrl: "http://192.168.29.8/public/_weblogin.html",
javascriptMode: JavascriptMode.unrestricted)),
);
}
}

You can view alternative designs on onWebResourceError
full code:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.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 HomeView(),
);
}
}
class HomeView extends StatefulWidget {
const HomeView({Key? key}) : super(key: key);
#override
_HomeViewState createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
bool isError = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home"),
),
body: Stack(
children: [
if (!isError)
WebView(
initialUrl: 'http://192.168.29.8/public/_weblogin.html',
javascriptMode: JavascriptMode.unrestricted,
onWebResourceError: (error) => setState(() {
isError = true;
}),
),
if (isError) const Center(child: Text("WEB PAGE ERROR")),
],
),
);
}
}

Related

WebView on Flutter

When trying to run the below code, we got the error
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(
const MaterialApp(
home: WebViewApp(),
),
);
}
class WebViewApp extends StatefulWidget {
const WebViewApp({super.key});
#override
State<WebViewApp> createState() => _WebViewAppState();
}
class _WebViewAppState extends State<WebViewApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: const WebView(
initialUrl: 'https://flutter.dev',
),
);
}
}
In import 'package:webview_flutter/webview_flutter.dart';
we got the error:
Target of URI doesn't exist: 'package:webview_flutter/webview_flutter.dart'.
Try creating the file referenced by the URI, or try using a URI for a file that does exist.

status bar overlapping my WebView screen, how to fix this?

I am building APK for my web app but the upper part of the web app is overlapped by the status bar
I want to show the status bar but not overlap my Webview, Webview must use screen size except status bar
check screenshot of the problem
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const myapp());
}
// ignore: camel_case_types
class myapp extends StatelessWidget {
const myapp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Sample App",
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const Scaffold(
appBar: null ,
body: WebView(
initialUrl: 'https://primexop.com/motap/appw1/index.php?app_v=1.001010&ow_id=101',
javascriptMode: JavascriptMode.unrestricted,
)),
);
}
}
wrap your Scaffold or WebView with SafeArea Widget
check the code below which fixes this issue
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const myapp());
}
// ignore: camel_case_types
class myapp extends StatelessWidget {
const myapp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Sample App",
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const SafeArea(
child: Scaffold(
appBar: null,
body: WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://primexop.com/motap/appw1/index.php?app_v=1.001010&ow_id=101",
)),
),
);
}
}
I used SafeArea to wrap the Scaffold
Result screenshot

Setting theme data for flutter app seems broken

I've tried everything I can think of to change the background color of my flutter app, but every time I run the app, the background is black.
This is main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'auth_controller.dart';
import 'themes/color.dart';
import 'index.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp().then((value) => Get.put(AuthController));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
//ThemeData
title: 'Title',
theme: ThemeData(
brightness: Brightness.light,
),
home:const Index(),
debugShowCheckedModeBanner: false,
);
}
}
I don't think I'm even using themes/color.dart but I thought I'd leave it in anyway. Brightness should set it.
This is index.dart
import 'package:flutter/material.dart';
import 'themes/color.dart';
import 'signup.dart';
Future<void> main() async {
runApp(MyApp(
routes: <String, WidgetBuilder>{
'/signup': (BuildContext context) => const SignUp()
},
debugShowCheckedModeBanner: false,
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key, required Map<String, WidgetBuilder> routes, required bool debugShowCheckedModeBanner}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
backgroundColor: const Color(0xFFe3e4e4),
appBar: AppBar(
title: const Text('Flutter Screen Background Color Example'),
),
body: const Center(child: Index()),
),
);
}
}
class Index extends StatelessWidget {
const Index({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const SizedBox(height: 20,),
ElevatedButton(
child: const Text('WTF'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUp()),
);
}
),
]
)
);
}
}
It seems like the background should be a light grey,but it's black. I tried invalidating the caches and restarting too.

how can i play rtsp video stream in flutter?

this is my code thats i m trying by using flutter vlc player but its not working so any can help me to solving the issue or i can show stream with another way?
so you guys can give me any suggestion or give any little example. i m trying to solve this issue from last two hours but its not going
import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';
import 'package:flutter_vlc_player/vlc_player.dart';
import 'package:flutter_vlc_player/vlc_player_controller.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(
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
VlcPlayerController _videoPlayerController;
#override
void initState() {
super.initState();
_videoPlayerController = VlcPlayerController.network(
'rtsp://viewer:aeDoPhiucees3gohshie#173.249.14.110:27954/axis-media/media.amp?videocodec=h264&fps=15&audio=1&resolution=640x480',
hwAcc: HwAcc.FULL,
autoPlay: false,
options: VlcPlayerOptions(),
);
}
#override
void dispose() async {
super.dispose();
await _videoPlayerController.stopRendererScanning();
await _videoPlayerController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: VlcPlayer(
controller: _videoPlayerController,
aspectRatio: 16 / 9,
placeholder: Center(child: CircularProgressIndicator()),
),
),
);
}
}
Here is a small example that works for me. I think the problem is that in the newer versions the Controller must be initialized immediately.
The only problems I have with this code is that the advanced options take no effect. Unfortunately it is hard to find some good information
import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';
import 'package:flutter_vlc_player/src/vlc_player_controller.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, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
VlcPlayerController _vlcViewController = new VlcPlayerController.network(
"rtsp://192.72.1.1/liveRTSP/av4",
autoPlay: true,
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new VlcPlayer(
controller: _vlcViewController,
aspectRatio: 16 / 9,
placeholder: Text("Hello World"),
),
],
),
),
);
}
}
Check out this lib: https://pub.dev/packages/flutter_playout. It does support HLS.

How to make webview not reload when I switch appbar in my flutter app?

I want webview not reload when I switch appbar in my flutter app, but I don't know how should I do, and I am sorry that I am a beginner.
This is my recorded gif:
I searched on Google, but I didn't find an answer related to this.
//index.dart
import 'package:flutter/material.dart';
import 'navigation_tab.dart';
import '../home/home_page.dart';
import '../market/market_page.dart';
import '../my/my_page.dart';
class Index extends StatefulWidget {
#override
_IndexState createState() => new _IndexState();
}
class _IndexState extends State<Index> with TickerProviderStateMixin {
int _currentIndex = 0;
List<NavigationTab> _navigationTabs;
List<StatefulWidget> _pageList;
StatefulWidget _currentPage;
#override
void initState() {
super.initState();
_navigationTabs = <NavigationTab>[
new NavigationTab(icon: new Icon(Icons.account_balance), title: new Text("home"), vsync: this),
new NavigationTab(icon: new Icon(Icons.local_mall), title: new Text("market"), vsync: this),
new NavigationTab(icon: new Icon(Icons.account_box), title: new Text("my"), vsync: this),
];
_pageList = <StatefulWidget>[
new HomePage(),
new MarketPage(),
new MyPage(),
];
_currentPage = _pageList[_currentIndex];
}
#override
Widget build(BuildContext context) {
return new Scaffold(
body: _currentPage,
bottomNavigationBar: new BottomNavigationBar(
items: _navigationTabs.map((tab) => tab.item).toList(),
currentIndex: _currentIndex,
fixedColor: Colors.blue,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentIndex = index;
_currentPage = _pageList[index];
});
},
),
);
}
}
//home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: PreferredSize(
child: new AppBar(
title: new Text("home"),
centerTitle: true,
),
preferredSize: Size.fromHeight(40)
),
body: new Center(
child: new Text("this is home page", style: TextStyle(fontSize: 36)),
),
);
}
}
//market_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class MarketPage extends StatefulWidget {
#override
_MarketPageState createState() => new _MarketPageState();
}
class _MarketPageState extends State<MarketPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: PreferredSize(
child: new AppBar(
title: new Text("market"),
centerTitle: true,
),
preferredSize: Size.fromHeight(40)
),
body: new WebviewScaffold(
url: "https://flutter.dev/",
withLocalStorage: true,
withJavascript: true
),
);
}
}
I want webview page keepalive, like vue, How should I do it?
Basically, your MarketPage widget is re-building whenever you open it. You can use keep alive to attain your required behaviour.
//market_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class MarketPage extends StatefulWidget {
#override
_MarketPageState createState() => new _MarketPageState();
}
class _MarketPageState extends State<MarketPage> with AutomaticKeepAliveClientMixin{
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: PreferredSize(
child: new AppBar(
title: new Text("market"),
centerTitle: true,
),
preferredSize: Size.fromHeight(40)
),
body: new WebviewScaffold(
url: "https://flutter.dev/",
withLocalStorage: true,
withJavascript: true
),
);
}
#override
bool get wantKeepAlive => true;
}
Update -
Here is an example of how you can do it using AutomaticKeepAliveClientMixin. This is working fine for me. I'm using Pageview and webview_flutter instead of flutter_webview_plugin.
main.dart
import 'package:flutter/material.dart';
import 'package:webview_project/pag1.dart';
import 'package:webview_project/page2.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 _currentIndex = 0;
var controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: controller,
children: <Widget>[
Page1(),
Page2(),
],
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.web), title: Text('Web')),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
controller.jumpToPage(index);
});
},
),
);
}
}
page1.dart
import 'package:flutter/material.dart';
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('Page1'),
);
}
}
page2.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Page2 extends StatefulWidget {
#override
_Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2>
with AutomaticKeepAliveClientMixin<Page2> {
#override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://www.flutter.dev/',
);
}
#override
bool get wantKeepAlive => true;
}