flutter商城项目实战（一）

p2

1创建项目：

项目目录下：
flutter create 项目名（自己起 不支持大小写 可以用下划线 比如：flutter_shop）
出现All done就是创建成功了

2安装：Awesome Flutter Snippets

点开可以看到快速生成方法的指令
stlss:StatelessWidget 静态组件

3.创建一个pages文件夹

flutter推荐以下划线的形式命名
点vscode右下角的no devices可以打开虚拟机
ctrl+波浪线可以打开终端

4.目录结构：

5.代码：

main.dart:

import 'package:flutter/material.dart';
import './pages/Index_page.dart';
void main()=>runApp(Myapp());
class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 每个组件外边写个container以后更好扩展 例如调节边距
    // debugShowCheckedModeBanner: false,右上角的debug不展示
    return Container(
      child: MaterialApp(
        title:'百姓生活+',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primaryColor:Colors.pink
        ),
        home: IndexPage(),
      ),
    );
  }
}

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('百姓生活+')
      ),
    );
  }
}

P3+P4底栏实现

1基础讲解

谷歌推出适配平板电脑 台式机 手机 有质感 有立体感 卡片风格 有交互效果
import 'package:flutter/material.dart';
ios风格
import 'package:flutter/cupertino.dart';

2目录结构：

3页面代码

index_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import './cart_page.dart';
import './home_page.dart';
import './categary_page.dart';
import './member_page.dart';
// 动态组件
class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State {
  final ListbottomTabs=[
         BottomNavigationBarItem(
           icon:Icon(CupertinoIcons.home),
           title:Text('首页')
           ),
            BottomNavigationBarItem(
           icon:Icon(CupertinoIcons.search),
           title:Text('分类')
           ),
            BottomNavigationBarItem(
           icon:Icon(CupertinoIcons.shopping_cart),
           title:Text('购物车')
           ),
            BottomNavigationBarItem(
           icon:Icon(CupertinoIcons.profile_circled),
           title:Text('会员中心')
           )
  ];
  // 建立一个列表
  final List tabbodies=[
    HomePage(),
    CategaryPage(),
    CartPage(),
    MemberPage()
  ];
  int currentIndex=0;
  var currentPage;
  @override
  void initState() {
    // TODO: implement initState
    currentPage=tabbodies[currentIndex];
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
     bottomNavigationBar: BottomNavigationBar(
       type:BottomNavigationBarType.fixed,
       currentIndex: currentIndex,
       items: bottomTabs,
       onTap: (index){
         setState(() {
           currentIndex=index;
           currentPage=tabbodies[currentIndex];
         });
       },
     ),
     body: currentPage,
    );
  }
}

home_page.dart

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Text('首页')
      )
    );
  }
}

其他三个页面 都一样的把名字改了就行 略