一，背景

四格漫画，是以四个画面分格来完成一个小故事或一个创意点子的表现形式，分为开头，发展，高潮，结尾。那怎么用手机制作一个四格漫画呢？就像下图这样。

二，思考过程

漫画么，简单点就两个主要的元素，图像，文字，那么对应到手机上就是照片编辑和文字编辑。

将这些元素串起来，主流程也就有了。

只有主流程不够，添加照片就要同时支持删除照片，添加了文字也要删除文字，万一文字大小颜色不合适也不行，还要支持编辑文字，保存到本地可以，那分享到微信也算是保存。所以每一个节点的分支功能大致如下所示。

接下来根据主流程考虑下ui和交互，交互的原则就是能少一步就少一步。大象放冰箱里，也只要三步而已。

分支功能，不能离主流程太远，要一目了然。

三，实现过程

先按照主流程来实现，之后在考虑每个节点的分支，实现就是一个不停的搜索，实验的过程，我一直觉得，大部分普通人能想到的东西，一定有人之前就实现了，比如：

主要控件和插件：

image_picker：照片选择
photo_view：照片显示，支持缩放
TextField：文字编辑
Positioned：文字移动
image_gallery_saver：图片保存
permission_handler：权限申请
fluttertoast：toat提示

四，效果

五，后续迭代

如果有后续，要考虑下列功能

1，文字：颜色，大小，字体，方向，表情，文字外框

2，图片：支持拍照，裁剪，简单滤镜

3，保存：分享到微信好友，朋友圈

debug版本：

链接: https://pan.baidu.com/s/1-JAOfzboDCHt-4aGjNTrnA

提取码: bn5v

源码，清晰的视频请关注公众号

怎么用手机制作一个四格漫画（flutter）相关推荐

html5 漫画效果,CSS3和js打造四格漫画风格的LightBox特效
在这篇文章中我们想制作一个很有意思四格漫画风格的Lightbox特效.以前在报纸上可以看到很多的四格漫画,我们做的这个特效类似于这个风格,一个大方框中包含4格等宽等高的图片,当点击任意图片的时候,该图 ...
Unity3d如何实现四格漫画动态播放
前言四格漫画,百度百科: 四格漫画,是以四个画面分格来完成一个小故事或一个创意点子的表现形式.四格漫画短短几格就涵盖了一个事件的发生.情节转折及幽默的结局.让人看完不觉莞尔,会心一笑或捧腹大笑.四格 ...
［蛋蛋四格漫画］蛋蛋式按摩……（中日台词对照）
国庆七天假,大家玩得开心哇? 偶玩得很开心呐------ 去了看街舞大赛,看野生动物,看漫画节---- 等偶空鸟马上更新那几天拍滴PP呐! 好咧,马上瞄瞄新一期的四格漫画吧! 宗旨: 希望能让大家开怀 ...
四格漫画《MUXing》——度姐传说
MUXING用户研究工程师们热情.专业且富有亲和力.同时,他们也是群有故事的人-- [本文首发于:百度用户体验部]http://mux.baidu.com/?p=1169 [关注百度技术沙龙] 本文 ...
推荐四格漫画:勇者、魔族、龙族
作者: 黄色书刊出版社:? 连载中: 第1~150话 http://open.dmzj.com/baiduReader/index.html?comicId=40295&partId=649 ...
四格漫画《MUXing》——请客记
年关将近,聚会增多,请客?还是被请?这是个问题-- [本文首发于:百度用户体验部]http://mux.baidu.com/?p=675 [关注百度技术沙龙] 转载于:https://blog.51c ...
四格漫画《MUXing》——他们在干什么
黑夜给了我一双黑色的眼睛,我用它来追逐光明,但--他们在干什么? [本文首发于:百度用户体验部]http://mux.baidu.com/?p=1859 [关注百度技术沙龙] 本文转自百度技术51CT ...
[原创]找工作（四格漫画）
鼠标绘制(没有鼠标垫),粗糙,勿怪.
从菜鸟到大佬（四格漫画）
从前是个与世无争的小菜鸟. 在电光火石中涅槃重生.脱胎换骨. 开始在IT业闯荡世界. 成为众星拱月的江湖大佬. 以上图片来源: 火腿肠里有亚硝酸盐,吃了会致癌吗?|亚硝酸盐|亚硝胺|致癌_新浪新闻下 ...

怎么用手机制作一个四格漫画（flutter）