Initializing Flutter-Fire flutter Web - flutter

Question

I can't figure out where is the problem output gives me Connection failed Here is the screen out put image. I'm trying to Initializing FlutterFire (Flutter Web). I'm doing it with the proper guidelines of official documentation https://firebase.flutter.dev/docs/overview#initializing-flutterfire.But can't figure out where I'm doing the mistake.
When I remove or comment on this part of codes it run.
// Check for errors
if (snapshot.hasError) {
return Center(
child: Text('Connection failed'),
);
}
Here is my main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Phatafut Admin Panel',
theme: ThemeData(
primaryColor: Colors.greenAccent,
),
home: MyHomePage(title: 'Phatafut Admin Panel'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final Future<FirebaseApp> _initialization = Firebase.initializeApp();
final _formKey = GlobalKey<FormState>();
// FirebaseServices _services = FirebaseServices();
var _usernameTextController = TextEditingController();
var _passwordTextController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
// // key:_formKey,
// appBar: AppBar(
// elevation: 0.0,
// title: Text('Grocery Store Admin Dashboard',style: TextStyle(color: Colors.white ),),
// centerTitle: true,
body: FutureBuilder(
// Initialize FlutterFire:
future: _initialization,
builder: (context, snapshot) {
// Check for errors
if (snapshot.hasError) {
return Center(
child: Text('Connection failed'),
);
}
// Once complete, show your application
if (snapshot.connectionState == ConnectionState.done) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF84c225), Colors.white],
stops: [1.0, 1.0],
begin: Alignment.topCenter,
end: Alignment(0.0, 0.0)),
),
child: Center(
child: Container(
width: 350,
height: 400,
child: Card(
elevation: 6,
shape: Border.all(color: Colors.green, width: 2),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
child: Column(
children: [
Image.asset('images/logo.png'),
Text(
'Grocery App ADMIN',
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20),
),
SizedBox(
height: 20,
),
TextFormField(
controller: _usernameTextController,
validator: (value) {
if (value.isEmpty) {
return 'Enter UserName';
}
return null;
},
decoration: InputDecoration(
labelText: 'UserName',
prefixIcon: Icon(Icons.person),
contentPadding: EdgeInsets.only(
left: 20, right: 20),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context)
.primaryColor,
width: 2))),
),
SizedBox(
height: 20,
),
TextFormField(
controller: _passwordTextController,
validator: (value) {
if (value.isEmpty) {
return 'Enter Password';
}
if (value.length < 6) {
return 'Minimum 6 character required';
}
return null;
},
obscureText: false,
decoration: InputDecoration(
labelText: 'Minimum 6 Characters',
prefixIcon: Icon(Icons.vpn_key_sharp),
hintText: 'Password',
contentPadding: EdgeInsets.only(
left: 20, right: 20),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context)
.primaryColor,
width: 2))),
),
],
),
),
Row(
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.green,
onSurface: Colors.grey,
),
onPressed: () async {
if (_formKey.currentState.validate()) {
// _login(username: _usernameTextController.text, password: _passwordTextController.text);
}
},
child: Text(
'Login',
style: TextStyle(color: Colors.white),
)),
),
],
)
],
),
),
),
),
),
),
);
}
// Otherwise, show something whilst waiting for initialization to complete
return Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}
here is my index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="admin_panel">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>admin_panel</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-analytics.js";
const firebaseConfig = {
apiKey: "********",
authDomain: "********",
projectId: "*********",
storageBucket: "************",
messagingSenderId: "******",
appId: "**************",
measurementId: "******"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Here is my pubspec.yaml
name: admin_panel
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.10.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
firebase_core: ^1.5.0
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
Thanks in advance

Answer 1

Try adding these lines under <body> in your index.html, the documentation suggests using version 8.6.1 this way:
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
And don't forget running flutter build web before deploying.