flutter 開發一個簡單的web項目


前幾天把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'),
      ),
    );
  }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM