02-Flutter移動電商實戰-創建項目和編寫入口文件

環境搭建請參考以前寫的一篇文章：Flutter_初體驗_建立第一個應用

一、建立項目

採用AndroidStudio構建本項目，FIle>New>New Flutter Project…

建立後的項目以下圖所示：

咱們着重須要注意一下幾個文件夾,其餘的暫時不用理會

文件夾	做用
android	android平臺相關代碼
ios	ios平臺相關代碼
lib	flutter相關代碼，咱們主要編寫的代碼就在這個文件夾
pubspec.yaml	配置文件，通常存放一些第三方的依賴。

二、編寫入口文件

flutter 中的入口文件爲 main.dart，該文件位於 lib 文件夾中。

默認建立的項目已經給我帶了一些測試代碼，運行起來看一下：

接下來要開始咱們本身的項目書寫了。

2.1 創建主頁文件和目錄結構

咱們在 lib 目錄下創建一個 pages 目錄，這個目錄主要放置項目所用的全部 UI 界面的文件，在 page 目錄下，創建 index_page.dart 文件。

有了這個文件，咱們先創建一個靜態 Widget，主要是檢驗咱們的入口文件是否可用。

index_page.dart 代碼：

import 'package:flutter/material.dart';

class IndexPage  extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本內容"),
      ),
    );
  }
}

代碼寫完後，須要在 main.dart(入口文件)，用 impoart 引入 index_page.dart 文件。

import './pages/index_page.dart';

main.dart 所有代碼：

import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/index_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Container(
        child:
            MaterialApp(
              title: 'Flutter Demo',
              theme: ThemeData(
                primarySwatch: Colors.blue,
              ),
              home: new IndexPage(),
            )
    );
  }
}

咱們再次運行起來看一下：

三、最後補充

跟着學習，以及在整理這個系列筆記中，關於文中一些基礎部分再也不累贅，好比 StatefulWidget/StateLessWidget區別、Container/Center/Text基礎控件等。