Dirección de prueba: (la página web se carga lentamente)
demostración de la página web
1. Crea un proyecto
flutter create example005_fatherson
2. AS se abre
3. Agregar dependencias
Modificar pubspec.yaml
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
english_words: ^3.1.5
4. Modificar mart.dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() {
runApp(MyApp());
}
// 重点是 sonKey 变量
GlobalKey<_RandomWordState> sonKey = GlobalKey();
class MyApp extends StatelessWidget {
final wordPair = WordPair.random();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello world!',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:Center(
// child: Text("Hello world!"),
// child:Text(wordPair.asPascalCase),
child:Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10.0),
child: GestureDetector(
child: RandWords(key:sonKey),
onTap: (){
sonKey.currentState.change();
}
)
),
)
);
}
}
class RandWords extends StatefulWidget
{
RandWords({Key key}) : super(key: key);
@override
_RandomWordState createState() {
return _RandomWordState();
}
}
class _RandomWordState extends State<StatefulWidget>
{
String _wordPair = WordPair.random().asPascalCase;
void change()
{
setState(() {
_wordPair = WordPair.random().asPascalCase;
});
}
@override
Widget build(BuildContext context)
{
// final wordPair = WordPair.random();
return Text(_wordPair);
}
}
5. Depuración y ejecución
Primero abra el simulador de Android o iOS en AS y haga clic en el botón Ejecutar.
O ejecutar en la línea de comando:
flutter run
6. Empaqueta la web
flutter build web