我无法找出问题在哪里输出给我连接失败这是屏幕输出图像。我正在尝试初始化FlutterFire (Flutter Web)。我是按照官方文档的指导方针来做的https://firebase.flutter.dev/docs/overview#initializing-flutterfire.But我不知道我在哪里出错了。
当我删除或注释这部分代码时，它会运行。
// Check for errors
if (snapshot.hasError) {
return Center(
child: Text('Connection failed'),
);
}
这是我的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(),
);
},
),
);
}
}
这是我的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>
这是我的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
尝试在index.html的<body>下添加这些行，文档建议这样使用8.6.1版本:
<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>
在部署之前不要忘记运行flutter build web。