前幾天把flutter for web環境搭建好了,一直沒有時間嘗試,今天剛好有時間,嘗試了一下flutter for web開發
下載到flutter_web項目,找到hello world項目,運行起hello world項目,找到lib文件夾,修改main.dart里面的內容,並嘗試修改里面的內容,試了幾個widget的使用 row colume container 還試了push到下一級頁面,感覺都還挺不錯,之前的wiget基本上都能正常使用。有了一個新的開始,以后就可以使用flutter開發簡單的web項目了
代碼部分
// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter_web/material.dart';
import 'home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '我是title',
home: HomePage(),
);
}
}
import 'package:flutter_web/material.dart';
import 'other.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
title: Text('我是標題居中'),
centerTitle: true,
),
body: ListView(
children: <Widget>[
_rowTest(),
SizedBox(height: 10),
_columeTest(),
SizedBox(height: 10),
_pushTest(context),
],
),
);
}
Widget _pushTest(BuildContext context) {
return Container(
height: 200,
color: Colors.white,
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => OtherPage(),
),
);
},
child: Container(
color: Colors.red,
child: Text('點擊跳轉到下一頁'),
),
),
),
);
}
Widget _columeTest() {
return Container(
color: Colors.white,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('data'),
Text('data'),
Text('data'),
Text('data'),
Text('data'),
Text('data'),
],
),
);
}
Widget _rowTest() {
return Row(
children: <Widget>[
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 44,
child: Text('A'),
),
flex: 1,
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.blue,
height: 44,
child: Text('B'),
),
flex: 1,
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.orange,
height: 44,
child: Text('C'),
),
flex: 1,
),
],
);
}
}
import 'package:flutter_web/material.dart';
class OtherPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('我是二級頁面'),centerTitle: true,),
body: Center(
child: Text('aaaaaa'),
),
);
}
}