デモ
Webアドレス:Webデモ
参照
https://codelabs.flutter-io.cn/codelabs/mdc-101-flutter-cn/
使用したクラス
SafeAreaセーフエリアコンテナ、ノッチ表示の問題を解決します
ListView
SizeBox
Column
TextField
ButtonBar
TextButton
ElevatedButton
1.プロジェクトを作成します
flutter create example020_mdc100series
2.ASが開きます
3.依存関係を追加し、リソースファイルに配置します
assets:
- assets/diamond.png
- assets/slanted_menu.png
4.コードを書く
main.dart
import 'package:flutter/material.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: LoginPage()
);
}
}
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
// TODO: Add text editing controllers (101)
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 24.0),
children: <Widget>[
SizedBox(height: 80.0),
Column(
children: <Widget>[
Image.asset('assets/diamond.png'),
SizedBox(height: 16.0),
Text('SHRINE'),
],
),
SizedBox(height: 120.0),
TextField(
decoration: InputDecoration(
filled: true,
labelText: 'Username',
),
),
SizedBox(height: 12.0),
TextField(
decoration: InputDecoration(
filled: true,
labelText: 'Password',
),
obscureText: true,
),
ButtonBar(
children: <Widget>[
TextButton(
child: Text('CANCEL'),
onPressed: () {
},
),
ElevatedButton(
child: Text('NEXT'),
onPressed: () {
},
),
],
),
],
),
),
);
}
}
6.デバッグと実行
最初にASでAndroidまたはiOSシミュレーターを開き、実行ボタンをクリックします。
または、コマンドラインで実行します。
flutter run
7.Webをパッケージ化します
flutter build web
8.ソースコード
https://gitee.com/ruik2080/example-flutter