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

02.Flutter實戰創建項目和編寫入口文件

 

建立項目：

flutter create flutter_shop

建立完成以後呢，它會提示咱們，

進入flutter_shop的目錄，而後執行flutter run來運行項目

 

爲何起名flutter_shop用下劃線的形式呢？由於在windows下不支持小駝峯和大駝峯的命名方式，官方推薦咱們使用下劃線的形式

 

作項目的時候，外層都套一個Container組件呢，這樣會使你之後擴展會變的很容易

開始寫入口文件main.dart

新建文件夾Pages，全部的UI頁面都放在Pages頁面下面

新建index_page.dart頁面。官方推薦使用下劃線的方式，這裏我也使用下劃線的方式去命名頁面的文件。

 

在main.dart頁面引入咱們的index_page頁面

 

查看效果：

 

 

 

代碼；

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:MaterialApp(
        title:'百姓生活+',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor: Colors.pink
        ),
        home: IndexPage(),
      )
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';

class IndexPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百興生活+'),),
      body: Center(
        child: Text('百姓生活+'),
      ),
    );
  }
}

index_page.dart