Flutter, WebView empty page using Provider - flutter

I have Provider on top of MyApp, and the webview is still opening with a blank screen.
No errors, no suggestions it just opening with a blank screen and not loading.
If i put a web address in the url is working fine but i want to have this dynamic.
runApp(
Provider<Events>.value(
value: Events(),
child: MyApp(),
),
);
class Events {
final String imagePath, site;
Events({
this.imagePath, this.site
});
final events = [
castel,
lake,
];
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import '../model/events.dart';
import './flutter_web.dart';
class Site extends StatelessWidget {
#override
Widget build(BuildContext context) {
final events = Provider.of<Events>(context);
return Container(
padding: const EdgeInsets.all(4.0),
child: Container(
child: IconButton(
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => FlutterWeb(events.site),
),
),
icon: Icon(
FontAwesomeIcons.internetExplorer,
size: 30.0,
color: Colors.lightBlue,
),
),
),
);
}
}
return WebView(
initialUrl: events.site,
)

You can copy paste run full code below
In value attribute, you need to pass variable not class
In your code snippet events is array it might be a typo
code snippet
void main() {
final events = Events(imagePath: "castel", site: "https://flutter.dev/");
runApp(
Provider<Events>.value(
value: events,
child: MyApp(),
),
);
}
working demo
full code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Events {
final String imagePath, site;
Events({this.imagePath, this.site});
}
void main() {
final events = Events(imagePath: "castel", site: "https://flutter.dev/");
runApp(
Provider<Events>.value(
value: events,
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Site());
}
}
class Site extends StatelessWidget {
#override
Widget build(BuildContext context) {
var events = Provider.of<Events>(context);
return Scaffold(
body: Center(
child: Container(
padding: const EdgeInsets.all(4.0),
child: Container(
child: IconButton(
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => FlutterWeb(events.site),
),
),
icon: Icon(
FontAwesomeIcons.internetExplorer,
size: 30.0,
color: Colors.lightBlue,
),
),
),
),
),
);
}
}
class FlutterWeb extends StatelessWidget {
String site;
FlutterWeb(this.site);
#override
Widget build(BuildContext context) {
return WebView(
initialUrl: site,
);
}
}

Related

The Audio Cash Library URI does not exist I have searched for solutions but nothing worked I need to play a video from the assets folder

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cash.dart';
strong text
void main() => runApp(XylophoneApp());
class XylophoneApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Container(
child: Center(
child: FlatButton(
child: Text("Click Me"),
onPressed: (){
},
),
)
),
),
),
);
}
}

My Counter made with ChangeNotifier Provider replicates its value with other Counter Instances

I am creating a counter for a shopping cart. The problem is when the value of one counter changes, it affects all the other counters on the screen. I used ChangeNotifier and I have no idea what I am doing wrong.
This is the Counter Model
import 'package:flutter/material.dart';
class CounterModel extends ChangeNotifier {
int _count = 0;
int get getCount => _count;
void increment() {
if (_count >= 0) {
_count++;
}
notifyListeners();
}
void decrease() {
if (_count > 0) {
_count--;
}
notifyListeners();
}
}
This is the build of the Counter
import 'package:flutter/material.dart';
import 'package:provide_count/counter_model.dart';
import 'package:provider/provider.dart';
class ProvideCount extends StatelessWidget {
#override
Widget build(BuildContext context) {
final counter = Provider.of<CounterModel>(context);
return Row(
children: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: counter.increment),
Text('${counter.getCount}'),
IconButton(icon: Icon(Icons.remove), onPressed: counter.decrease),
],
);
}
}
And this is the main.dart file
import 'package:flutter/material.dart';
import 'package:provide_count/counter_model.dart';
import 'package:provide_count/providecount.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<CounterModel>(create: (_) => CounterModel()),
],
child: MaterialApp(
title: 'Flutter Demo',
home: SafeArea(
top: true,
child: Scaffold(
body: Column(
children: [
ProvideCount(),
ProvideCount(),
ProvideCount(),
],
),
),
),
),
);
}
}
The problem is that you have a ChangeNotifierProvider at the top of your tree.
When you call Provider.of<CounterModel>, You are searching for the closest Provider widget on the tree, Which is the same for all of the widgets. So they sync up.
If you don't want this to happen, you could stop using Provider, or you could at least wrap each ProvideCount with their own Provider:
return MaterialApp(
title: 'Flutter Demo',
home: SafeArea(
top: true,
child: Scaffold(
body: Column(
children: [
ChangeNotifierProvider<CounterModel>(
create: (_) => CounterModel()
child: ProvideCount(),
),
ChangeNotifierProvider<CounterModel>(
create: (_) => CounterModel()
child: ProvideCount(),
),
ChangeNotifierProvider<CounterModel>(
create: (_) => CounterModel()
child: ProvideCount(),
),
],
),
),
),
);

Flutter using a changenotifier with named routes

I've followed some online tutorials and managed to implement ChangeNotifier when the app has a single route however none of these explain how to implement this when the app has more than one route (screen) which is rather the point!
I made an attempt to figure this out myself but when the app runs in the emulator I get a blank screen.
/* main.dart */
import 'dart:collection'; // used in test.dart
import 'package:flutter/foundation.dart'; // used in test.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class Person extends ChangeNotifier {
Person({this.firstName});
String firstName = '';
void updateName(String n) {
this.firstName = n;
notifyListeners();
}
}
void main() {
runApp(
Provider(
create: (_) => Person(firstName: 'Mark'),
child: MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeRoute(),
'/second': (context) => SecondRoute(),
'/third': (context) => ThirdRoute(),
},
),
)
);
}
class HomeRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Provider.of<Person>(context).firstName),
),
body: Center(
child: new IconButton(
icon: new Icon(Icons.favorite, color: Colors.redAccent),
iconSize: 70.0,
onPressed: () {
Navigator.of(context).pushNamed("/second");
}
),
),
);
}
}
class SecondRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: Text(Provider.of<Person>(context).firstName),
),
);
}
}
class ThirdRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Third Page'),
),
body: Center(
child: Text('Third Route'),
),
);
}
}
The project builds and runs with no error messages which has stumped me.
Any thoughts?
Code developed in FlutLab

I have written this code but, it is not allowing me to use the builder method inside ChangeNotifierProvider? i dont know, how to get rid of this?

import 'package:flutter/material.dart';
import 'package:learningflutter5h/screens/product_detail_screen.dart';
import 'package:learningflutter5h/screens/products_overview_screen.dart';
import 'package:provider/provider.dart';
import './providers/products.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
//my builder is not running here
builder:(ctx)=>Products(),
child: MaterialApp(
title: 'My Shop',
theme: ThemeData(
primarySwatch: Colors.purple,
accentColor: Colors.deepOrange,
fontFamily: 'Lato',
),
home: ProductsOverviewScreen(),
routes: {ProductDetailScreen.routName: (ctx) => ProductDetailScreen()},
),
);
}
}
You can copy paste run full code below
You can use create
code snippet
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<Product>(
create: (context) => Product(),
child: MaterialApp(
home: Scaffold(
working demo
full code
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<Product>(
create: (context) => Product(),
child: MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('My App')),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(20),
color: Colors.green[200],
child: Consumer<Product>(
builder: (context, myModel, child) {
return RaisedButton(
child: Text('Do something'),
onPressed: () {
myModel.doSomething();
},
);
},
)),
Container(
padding: const EdgeInsets.all(35),
color: Colors.blue[200],
child: Consumer<Product>(
builder: (context, myModel, child) {
return Text(myModel.someValue);
},
),
),
],
),
),
),
);
}
}
class Product with ChangeNotifier {
String someValue = 'Hello';
void doSomething() {
someValue = 'Goodbye';
print(someValue);
notifyListeners();
}
}

Flutter BLoC Issues

I am currently trying to figure out how to implement the BLoC pattern in a simple TodoList. I am now facing some issues and am not quite sure why. Seems to come from the "TodoBlocProvider" and shows up when I add a new Todo in "add_task_page". I know its a lot of code and probably not the best you have seen, but if someone can help me it would be really nice and very much appreciated.
Git Repo
I found your issue, let me know if it helped
replace your main.dart by the following
import 'package:flutter/material.dart';
import 'package:todo_v2/TodoBlocProvider.dart';
//import 'package:todo_v2/TodoViewModel.dart';
import 'package:todo_v2/add_task_page.dart';
//import 'package:todo_v2/database.dart';
import 'package:todo_v2/listview.dart';
import 'package:todo_v2/todo_bloc.dart';
//import 'package:uuid/uuid.dart';
//import 'Todo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return TodoBlocProvider(
todoBloc: TodoBloc(),
child: 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 _index = 0;
#override
Widget build(BuildContext context) {
final todoBloc = TodoBlocProvider.of(context);
return Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
title: Text(widget.title),
),
body: StreamBuilder(
stream: todoBloc.todoList,
builder: (BuildContext context, snapData) {
if (snapData.hasData) {
print("hasdata ${snapData.data.length}");
return CustomListView(todos: snapData.data);
} else {
return Container(
child: Text("nodata"),
);
}
}),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => NewTodoPage()));
}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.event),
onPressed: (){},
),
IconButton(
icon: Icon(Icons.event_available),
onPressed: (){})
],
),
)
);
}
}