zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    javascript之奇淫技巧
    nodejs的某些api~(一)node的流2
    javascript Object的新方法
    nodejs的某些api~(一)node的流1
    商城作品简介
    Javascript设计模式之观察者模式
    HTML 5 canvas globalCompositeOperation 属性
    设计模式----单利模式
    Centos6.8 安装tomcat8.5.11
    eclipse使用maven tomcat插件部署无法关联源代码
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/10624884.html
Copyright © 2011-2022 走看看