关于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('首页')
      )
    );
  }
}

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