关于flutter: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<IndexPage> {
  final List<BottomNavigationBarItem>bottomTabs=[
         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('首页')
      )
    );
  }
}

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