码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter 建立项目和编写入口文件

时间:2020-06-04 16:51:03      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:debug   pre   vsc   xtend   项目   界面   center   bar   material   

在你的电脑上找一个喜欢的位置,建立一个文件夹。

flutter create  项目名

注意: flutter建议使用下划线的这种命名方式。

当看到ALL Done字样的时候,就说明项目建立好了。然后进入VSCode,打开项目文件夹,可以看到项目的结构了。

然后进入lib目录下,可以看到一个main.dart文件,打开这个文件,清空原有代码,写入下面的代码,

import package:flutter/material.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()
      ),
    );
  }
}

建立主页文件

lib目录下建立一个pages目录,这个目录主要放置项目所用的所有UI界面的文件,在page目录下,建立index_page.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( 百姓生活+)
      ),
    );
  }
}

代码写完后,记得在main.dart(入口文件),用impoart引入index_page.dart文件。

import ./pages/index_page.dart;

这时候在终端里运行Flutter run就可以看到效果了,

Flutter 建立项目和编写入口文件

标签:debug   pre   vsc   xtend   项目   界面   center   bar   material   

原文地址:https://www.cnblogs.com/joe235/p/11495363.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!