- 博客(31)
- 收藏
- 关注
RSS订阅
原创 Flutter怎么运行一个项目
还记的我最开始学习flutter的时候，创建完工程以后，不知道怎么去运行出效果。我相信很多人最开始的时候也是一脸懵。flutter创建好工程以后，有一个自动生成的main.dart文件，这个就是运行时的主文件，里面有运行的入口函数。对于初学者只是简单写几个demo，没必要这么选择这种方式，麻烦没有效率。请参考以下过程修改：（1）找到main.dart这个文件，把里面的内容全部删掉，放入以下代码，这个代码就是运行的基本架构，以后我们写所有的代码都可以直接在这个文件里面写。import 'package:
2020-12-14 13:56:55
6563
10
原创 Flutter 轮播图3
送福利啦~再给大家推荐几个模板轮播图，拿走拿走????（一）效果图1（一）代码还不知道怎么复制代码运行的，看看我唯一置顶的的博客，看看就会啦~，不会的来问我????以下代码在上一篇的基础上替换swiper部分就可以啦 Container( padding: EdgeInsets.only(top: 10), height: 180, child: Swiper(
2020-12-31 10:54:38
1044
原创 Flutter 轮播图2
上一篇博客我们做一个全屏的轮播效果，这次我们做一个比较大众的~老规矩，看效果图（一）效果图(二)看代码import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class SwiperPage extends StatefulWidget { @override _SwiperPageState createState() => _SwiperPageSt
2020-12-31 10:18:08
191
原创 Flutter 轮播图（基础版）
哈哈哈，女帝的身材绝了呀，做一个轮播图慢慢看，身材比例也太好吧，你们也赶紧收藏学起来吧~老规矩，先看图（一）效果图（二）效果实现首先，我们要引入依赖，在pubspec.yml这个文件写入一个指令，看图版本号可能会不同，给个网址自己去下~https://pub.dev/packages/flutter_swiper然后就是准备你喜欢的图片，开始画ui啦话不多说，上代码：复制即可运行，你看我多懂你们，嘿嘿import 'package:flutter/material.dart';imp
2020-12-30 17:40:26
508
4
原创 Flutter 日历
（一）效果（二）代码实现没有下依赖的记得参照时间戳那篇博客以下代码复制进main.dart文件即可运行import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debug
2020-12-29 14:55:48
3222
1
原创 Flutter 时间戳 以及格式化时间
（一）效果图（二）实现修改pubspec.yaml文件导入红勾所示的文件，提醒一下大家哈，这个文件不能有多余的空格分号等或者格式不对等问题，否则都会导致下载依赖失败代码：import 'package:flutter/material.dart';import 'package:date_format/date_format.dart';//导包void main() => runApp(MyApp());class MyApp extends StatelessWidget {
2020-12-29 14:35:21
9546
原创 Flutter form表单综合运用
老规矩，看图（一）效果图（二）代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false,
2020-12-29 14:13:03
808
6
原创 Flutter各类按钮组件
还记得我最开始啥都不知道的时候，写个按钮都不知道怎么去修改样式。。。尼曼有福利了，我把需要用到的一些常用按钮，给你们都写出来啦老规矩，先看样式：（一）效果图（二）实现代码import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {
2020-12-29 13:57:06
699
原创 Flutter drawer侧边栏
（一）效果图（二）实现方法drawer组件以及它自带的组件实现column和row组件背景图image头像clipavatar（三）代码实现import 'dart:ui';import 'package:flutter/material.dart';class Tabs extends StatefulWidget { //返回到设置页面 final index;/////////// Tabs({Key key, this.index = 0}) : super(k
2020-12-29 11:43:16
508
原创 Flutter AppBar定义顶部Tab切换（滑动）
（一）效果及效果图效果：头部的选项可以切换，可以左右滑动（二）实现在上一篇博客的基础上加一个属性：isScrollable: true,以下是全部代码，如果想要运行，就要在main.dart里面写一个入口函数，在home的位置写Categorypage()import 'package:flutter/material.dart';class Categorypage extends StatefulWidget { @override _CategorypageState cr
2020-12-25 16:53:57
3988
4
原创 Flutter AppBar定义顶部Tab切换（固定）
（一）实现效果及效果图效果：（1）这个头部的切换数量是固定的，也就是不可以左右滑动类似于html里面的选项卡效果图：（二）实现方法tab组件tabbarview组件（三）代码实现import 'package:flutter/material.dart';//不可以左右滑动的头部选项卡效果class AppBarDemoPage extends StatelessWidget { @override Widget build(BuildContext context) {
2020-12-25 16:45:12
1303
原创 Flutter中路由替换和返回到根路由
一、用到的方法路由替换：Navigator.of(context).pop();返回到根路由：Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs()), (route) => route == null);二、我们用一个案例来详细讲解以上两个方法实现的效果：从首页点击注册-注册第二步-注册成功我们需要准备
2020-12-21 18:19:11
994
原创 Flutter命名路由及命名路由传值
上一篇博客我们学习了普通路由和普通路由传值，今天我们学习命名路由和命名路由传值，它更加的适用于中大型项目。能够达到统一管理路由的效果。我们实现的效果是从首页跳转到商品页面，再跳转到商品详情页面，然后返回上一级页面。以下是涉及到的所有页面的代码：main.dartimport 'package:flutter/material.dart';import 'pages/Form.dart';import 'pages/Search.dart';import 'routes/Routes.dart'
2020-12-16 16:26:51
1665
16
原创 Flutter普通路由的相关应用
揭秘上期的问题啦：要想实现底部有多个导航，我们可以加一个属性，type: BottomNavigationBarType.fixed把这句代码写在底部导航组件里面。然后就可以放多个导航图标了。如果不加这个属性的话，当底部的导航图标多了以后就会挤掉之前的，大家可以去试一下~现在开始新的内容：首先，路由是啥？通俗点说，就是页面跳转。切换页面，在flutter里面就是切换组件。今天我们了解一下，路由的两种配置方式，基本路由和路由传值（一）效果图及页面说明点击分类里面的表单按钮，就会跳转到表单页
2020-12-15 16:26:56
146
原创 Flutter bottomNavagationBar的应用
（一）效果图及说明我们今天要实现的效果就是点击下面的导航栏的图标，颜色变为绿色，然后可以加载出对应的页面内容。所以这一节又是一个有状态组件的应用例子哦赶紧收藏学习起来（二）实现要点（1）知识点：底部导航条bottomNavigationBar状态改变 setState图标的颜色变化用bottomNavigationBar里面的属性**提示：**怎么查看一个组件的属性双击选中组件，右键，就可以点开看到该组件的所有内容。快去试试吧（2）写法：抽离代码，跳转后的代码我们封装成在一个类里面
2020-12-15 14:31:55
244
原创 Flutter StatefulWidget的基本结构
前面提到了无状态的基本结构的代码，现在说一下有状态的记得收藏和学习哦import 'package:flutter/material.dart';//代码报红就导包class xxx extends StatefulWidget { @override _xxxState createState() => _xxxxState();}class _xxxState extends State<xxx> { @override Widget build(B
2020-12-15 12:08:41
352
2
原创 Flutter怎么加载本地图片
跟着博主看了这么久的flutter，有没有收获呀，各位但是你们居然没有问，怎么去运行加载出一张本地图片第一步，打开我们的工程，找到红框的文件第二步，打开它，然后修改下面的代码如果按照这种格式去加载本地图片，太耗时了，还得一张一张的去写路径，所以可以按照我的写提示：这个被我们修改的文件是很讲究格式滴，尤其是你在这个文件添加一些资源文件，依赖版本什么的，都要注意格式和写法，有时候多一个空格都不行哦，严格对齐在代码里面引入本地图片是：image.asset(“图片路径”)...
2020-12-14 22:18:00
1859
原创 Flutter StatefulWidget的相关应用
我们最常见的交互就是按钮组件，chexkbox , radio等我们今天就使用按钮完成一个简单的交互点击按钮，数字加1为了加深印象，我们先用无状态组件顶实现一个按钮，看看点击按钮会发生什么变化无状态的代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(Build
2020-12-14 18:08:02
991
3
原创 Flutter wrap组件的应用
（一）效果图（二）实现要点按钮可以使用构造函数（三）代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( a
2020-12-14 17:29:17
235
8
原创 Flutter动态循环卡片组件
（一）效果图（二）实现要点listData.map((value) {}).toList()（三）代码实现导入数据文件里面的代码可以参考如下：List listData = [{ "title":"master", "author":"是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的", "imageUrl":"images/master.jpg",}, { "title":"最帅", "a
2020-12-14 16:37:48
1469
2
原创 Flutter card组件应用
（一）效果图（二）实现要点：card组件图片比例 AspectRatio图片填充 fit:BoxFit.cover圆形头像 ClipOval(可以参考以前的头像实现的博客链接: [link](链接: link.)ListView实现列表（三）代码实现我们用上一篇博客（链接: link.）的模板代码给大家做一个演示：import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp
2020-12-14 14:46:51
261
3
原创 Flutter循环动态数据2
循环list数据（一）效果图（二）实现实现要点：listview里面的builder方法准备一个数据文件导入import 'listData.dart';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ListViewPage2 extends StatelessWidget { //自定义方法 Widget _getListData(context, i
2020-12-08 15:54:28
1016
11
原创 Flutter循环动态数据1
（二）实现实现要点：实现代码：（基础版）import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ListViewPage2 extends StatelessWidget { //自定义方法 List<Widget> _getData() { List<Widget> list = new List(); for (var i = 0;
2020-12-08 15:49:08
575
原创 Flutter实现图文列表2
（一）效果图垂直列表水平列表1水平列表2（二）代码实现的是图文水平列表2实现要点：把ListView放进Container里面设置高度，并设置好方向， scrollDirection: Axis.horizontal垂直列表就不用这个属性了import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ListViewPage extends StatelessWidget
2020-12-08 14:26:54
431
原创 Flutter实现图文列表1
（一）效果图（二）实现代码实现要点：ListView和 ListTileimport 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ListViewPage extends StatelessWidget { Widget ListPages() { return ListView( children: <Widget>[ ListTi
2020-12-08 14:22:36
562
原创 Flutter实现头像效果的两种方式
（一）效果图（二）实现方式，两种第一种（基础版）：实现要点：利用Container里面的BoxDecoration网络加载图片 NetworkImageimport 'package:flutter/material.dart';class CircleImgPage extends StatelessWidget { Widget headImg(){ return Container( width: 400, height: 300,
2020-12-07 17:08:54
1517
原创 Flutter实现网格布局3
（1）效果图：（2）实现要点：循环遍历很多数量的图片用到了list图片尽可能的小，方便快速加载GridView主要用于实现商品列表给widget设置高度无用，它会自适应（滚动加载所有图片）SizeBox实现文字图片的间距（3）实现代码：import 'package:flutter/material.dart';import 'listData.dart';class GridPage extends StatelessWidget { List<Widget>
2020-12-03 16:00:20
642
2
原创 Flutter实现网格布局2
效果图：实现代码：import 'package:flutter/material.dart';class GridPage extends StatelessWidget { Widget centreSection() { return Container( height: 200, child: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
2020-12-03 13:53:27
373
11
原创 Flutter实现网格布局1
上一次有人在问是否可以用Grid布局，可以。上一次的做法：链接: link.效果图：提示一下部分代码的意思;实现代码如下：import ‘package:flutter/material.dart’;class GridPage extends StatelessWidget {Widget centreSection() {return Container(height: 300,child: GridView(gridDelegate: SliverGridDelegate
2020-12-03 13:49:54
598
原创 git拉取项目常遇到的问题
问题1：fatal: ‘others_done’ does not appear to be a git repositoryfatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.译：致命:’ others_done '似乎不是git存储库致命错误:无法从远程存储库中读取。请确保您拥有正确的访问权限并
2020-12-01 14:35:01
658
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人