【Flutter实战静态页面】--在线点餐app（7）—

原路指南

【Flutter】在线点餐APP_哔哩哔哩_bilibili

文章只作为初学者学习记录

//----------------------------------------------------

//**把AppBar-->Extract Method"detailsAppBar"*/

//**把class detailsAppBar放入app_bar.dart.dart文件中 */

final Function()? press;

SDK版本问题，要这样写，按压卡片才会跳转页面

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:foodordering/constants.dart';class ItemCard extends StatelessWidget {final String? title, shopName, svgSrc;final Function()? press;// final Function? onTap;const ItemCard({Key? key,this.title,this.shopName,this.svgSrc,required this.press, // this.onTap, }) : super(key: key);@overrideWidget build(BuildContext context) {// This size provide you the total height and width of the screenSize size = MediaQuery.of(context).size;return Container(margin: EdgeInsets.only(left: 20, right: 15, top: 20, bottom: 20),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10),boxShadow: [BoxShadow(offset: Offset(0, 4), //偏移量blurRadius: 20, //模糊半径color: Color(0xFFB0CCE1).withOpacity(0.32),),],),//容器里面套一个容器-->容器外面套了一层一层又一层child: Material(color: Colors.transparent,//用户点击时出现“水波纹”效果child: InkWell(// onTap: () {//   press;// },onTap: press,child: Padding(padding: const EdgeInsets.all(20.0),child: Column(children: <Widget>[Container(margin: EdgeInsets.only(bottom: 15),padding: EdgeInsets.all(25),decoration: BoxDecoration(color: kPrimaryColor.withOpacity(0.13),shape: BoxShape.circle,),child: SvgPicture.asset(svgSrc!,width: size.width * 0.18,// size.width * 0.18 means it use 18% of total width),),Text(title!,),const SizedBox(height: 10,),Text(shopName!,style: TextStyle(fontSize: 12),),],),),),),);}
}

import 'package:flutter/material.dart';
import 'package:foodordering/screens/details/details-screen.dart';
import 'package:foodordering/screens/home/components/item_card.dart';class ItemList extends StatelessWidget {const ItemList({Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return SingleChildScrollView(scrollDirection: Axis.horizontal, //卷轴滚动方向：水平child: Row(children: <Widget>[ItemCard(svgSrc: "assets/icons/burger_beer.svg",title: "Burger & Beer",shopName: "MacDonald's",press: () {},),ItemCard(svgSrc: "assets/icons/chinese_noodles.svg",title: "Chinese & Noodles",shopName: "Wendys",press: () {print("执行了");Navigator.push(context,MaterialPageRoute(builder: (context) {return DetailsScreen();},),);},),ItemCard(svgSrc: "assets/icons/burger_beer.svg",title: "Burger & Beer",shopName: "MacDonald's",press: () {},),ItemCard(svgSrc: "assets/icons/burger_beer.svg",title: "Burger & Beer",shopName: "MacDonald's",press: () {},),],),);}
}

app_bar.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';AppBar detailsAppBar() {return AppBar(elevation: 0,leading: IconButton(icon: Icon(Icons.arrow_back,color: Colors.white,),onPressed: () {},),actions: <Widget>[IconButton(icon: SvgPicture.asset("assets/icons/share.svg"),onPressed: () {},),IconButton(icon: SvgPicture.asset("assets/icons/more.svg"),onPressed: () {},),],);
}

【Flutter实战静态页面】--在线点餐app（7）——页面跳转相关推荐

vue h5 页面调起原生APP指定页面
这次分享可能比较适合小白,大神们多多指教哈!为什么这么说呢,因为我之前都是做pc,或者小程序.rn 什么的,原生app内嵌h5这种还是第一次. 最近提了个需求:app下载页如果当前应用已经安装就直接 ...
基于javaweb的在线点餐+外卖配送系统
一.系统简介本项目采用eclipse工具开发,jsp+servlet技术编写,样式采用了layui和bootstrap前段框架,数据库采用的是mysql,navicat开发工具. 系统一共分为4个角 ...
Flutter实战 | 从 0 搭建「网易云音乐」APP（五、播放功能逻辑）
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来. 下面是该APP 功能的思维导图: 前期回顾: 1.Flutter实战 | 从 0 搭建「网易云音乐」APP(一.创建 ...
Flutter实战 | 从 0 搭建「网易云音乐」APP（三、每日推荐、推荐歌单）
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来. 下面是该APP 功能的思维导图: 前期回顾: •Flutter实战 | 从 0 搭建「网易云音乐」APP(一.创建项 ...
Flutter实战之（Clubhouse App）
flutter_ClubHouse 课程安排每日一更, 最后达到的效果是1:1 项目简介 "Clubhouse"(俱乐部会馆)的音频聊天应用程序日前火了.这款社交软件的功能相对单 ...
Flutter实战5 -- 天气查询APP重构之状态管理(ScopedModel)
0x00 前言前面四篇文章: Flutter实战1 --- 写一个天气查询的APP Flutter实战2 --- 写一个天气查询的APP FFlutter实战3 --- PC上运行Flutter A ...
[Flutter]微信分享并从分享链接跳回APP指定页面
最近在使用flutter开发APP,flutter实现了一套代码同时生成Android和iOS两个平台的APP,可以实现零基础快速上手APP开发,缩短开发周期.但flutter仍处于较快增长期,版本迭 ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
学成在线第4天讲义-页面静态化页面预览
1页面静态化需求 1.为什么要进行页面管理? 本项目cms系统的功能就是根据运营需要,对门户等子系统的部分页面进行管理,从而实现快速根据用户需求修改页面内容并上线的需求. 2.如何修改页面的内容? ...
页面接收跳转数据_【实战案例】在线教育渠道落地页数据分析
商业数智化工作坊 " 与多位来自高校的专家学者与业界导师共同探索商业数字化.智能化发展趋势.技术及实践培养数字思维,掌握数智化工具,实现管理能力跃迁 " 1 背景与目标通过对 ...

【Flutter实战静态页面】--在线点餐app（7）——页面跳转

【Flutter实战静态页面】--在线点餐app（7）——页面跳转相关推荐

最新文章

热门文章