video import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } class HomePage extends StatefulWidget { @o…

前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC IDE:Android Studio 目录 1. 创建一个 Flutter 项目 第一步:主界面点击创建 Flutter 项目 第一步:如果已经打开项目,则通过 File->New->New Flutter Project... 创建 第二步:默认选择 Flutter Application 即可…

video import 'dart:math'; import 'package:flutter/material.dart'; import 'package:vector_math/vector_math.dart' show radians; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return…

PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样. 属性: controller -> PageController 用于控制视图页面滚动到的位置 children 视图页面列表 scrollDirection 页面滚动的方向,从左往右,或者从上往下 onPageChanged 视图页面发生转换的时候进行的函数操作 reverse 对视图页面的排列顺序进行反转 效果: PageView的用法 在项目的main.dart中的代码: import 'package:…

一,概述 PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的. 二,构造函数 类命构造函数(PageView) PageView 使用场景:创建一个可滚动列表 构造函数 PageView({ Key key, this.scrollDirection = Axis.horizontal, this.reverse = false, PageController controller, this.physics, this.pageSnapping = tru…

main.dart import 'package:flutter/material.dart'; import 'package:flutter_isolate/flutter_isolate.dart'; import 'isolates.dart'; import 'dbhelper.dart'; void main() { runApp(MaterialApp( title: 'Flutter Demo', initialRoute: '/', routes: { '/':(contex…

* 网格布局 class HomeContent extends StatelessWidget { List<Widget> _getListData() { var tempList = listData.map((value) { return Container( child: Column( children: <Widget>[ Image.network(value['imageUrl']), SizedBox( height: 10, ), Text( value[…

列表常见的情况: 1.垂直列表 2.垂直图文列表 3.横向列表 4.动态列表 名称 类型 说明 scrollDirection Axis Axis.horizontal 横向列表 Axis.vertical 垂直列表(默认垂直列表) padding EdgeInsetsGeometry 内边距 resolve bool 组件反向排序 children List<Widget> 列表元素 Flutter 基本列表 import 'package:flutter/material.dart'; v…

Flutter的Fliter Widget 也是非常强大的,它可以制作出你想要的神奇滤镜效果.下面制作一个毛玻璃效果. 这个和以前的写法都一样,所以就直接贴代码了. import 'package:flutter/material.dart'; import 'dart:ui'; //引入ui库,因为ImageFilter Widget在这个里边. void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @ove…

为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: https://github.com/mengdd/counter_state_management 切换分支对应不同的实现方式. Contents Flutter中的状态管理 状态分类 状态管理方法概述 Counter sample默认实现: StatefulWidget InheritedWidg…