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

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