Flutter中设置Container宽高可直接通过width和height属性来设置:如下 Container( width: 100, height: 100, color: Colors.red, child: Text('Container固定宽高'), ) 有时在不确定宽高的情况下需要设置Container的最大或最小宽高,可以通过Container的constraints属性来设置,如下: 设置container最小宽高 Container( constraints: BoxCons

根据官网的例子敲的~效果还是很棒的! 首先导入一个第三方包,可以用来随机生成单词组合 在 pubsepec.yaml下添加如下语句 dependencies: flutter: sdk: flutter english_words: ^ 然后在main.dart中导入这个包: import 'package:english_words/english_words.dart'; 下面开始编写代码: import 'package:english_words/english_words.dart';

import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 系统默认的appBar等高度 位于Dart Packages/flutter/src/material/constans.dart /// The height of the toolbar component of the [AppBar]. const double kToolbarHeight = 56.0; /// The height of the botto

App在很多情况下由于各种需求需要自定义标题栏,而在能够构建Android和IOS应用的Flutter中,如果不在Scaffold中使用AppBar会发现默认是沉浸式. 猜想:我们使用自定义标题栏好像需要知道状态栏的高度,我看到网上很多人想要自定义标题栏,却老是去找怎么获取状态栏的高度 解惑:其实并不用获取状态栏的高度,你想AppBar也是状态栏,它也需要知道状态栏的高度,它需要说明Flutter已经帮我们获取到了 接下来一步一步来看 一.怎么自定义标题栏 轻车熟路的就直接看第二步 自定义MAp

flutter 里面 RaisedButton.FloatingActionButton.FlatButton.OutlineButton 中四个button都无高度设置,如下用RaisedButton举例: 处理办法第一种:没有高度就用一个有高度的 View 来加载 Container,于是有了 new Container( height: 60.0, child: new RaisedButton(onPressed: (){}, child: new Text("测试Buton的宽度&qu

获取状态栏高度: final double statusBarHeight = MediaQuery.of(context).padding.top; 所谓安全区域,就是适配现在一些刘海屏之类的非常规显示屏,在flutter中除了根据上面的方法获取到状态栏高度,给页面加对应的状态栏高度padding,还有一个专门的widget用来显示安全区域内容:SafeArea 下面是对比图: 1 Widget build(BuildContext context) { 2 return Material(

修改TextField的高度可以通过decoration: InputDecoration的contentPadding进行修改,代码如下 new TextField( decoration: InputDecoration( contentPadding: const EdgeInsets.symmetric(vertical: 10.0), ), ) 这种修改可以在没有prefixIcon的时候生效,如果加入prefixIcon,就会出现一个最小的高度,这时,按照如上方法修改如果高度较小的时

修改TextField的高度可以通过decoration: InputDecoration的contentPadding进行修改,代码如下 new TextField( decoration: InputDecoration( contentPadding: const EdgeInsets.symmetric(vertical: 10.0), ), ) 这种修改可以在没有prefixIcon的时候生效,如果加入prefixIcon,就会出现一个最小的高度,这时,按照如上方法修改如果高度较小的时

使用脚手架Scaffold可以设置AppBar,想要设置高度,在AppBar外包一层PreferredSize,设置preferredSize的属性为想要的高度即可. Scaffold( appBar: PreferredSize( child: AppBar( ), preferredSize: Size.fromHeight(screenSize.height * 0.07)) );

textfiled 设置高度后,内容永远无法居中,最后找到原因 decoration: 中有一个 contentPadding属性,设置这个属性对应的Padding值即可

MediaQuery.of(context) 包含了一些屏幕的属性: size : 一个包含宽度和高度的对象,单位是dp print(MediaQuery.of(context).size); //输出: Size(411.4, 683.4) devicePixelRatio : 返回设备的像素密度 print(MediaQuery.of(context).devicePixelRatio); //2.625 textScaleFactor : 每个逻辑像素的字体像素数. 默认为1.0 获取上边

ListView嵌套时高度无法自适应,需要设置高度才可以显示,设置以下属性可以解决上述问题 shrinkWrap: true, physics: NeverScrollableScrollPhysics(),

API class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( // SliverAppBar高度 expandedHeight: 200.0

这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.dart'; import 'model/post.dart'; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return

2015年, Google 内部开始测试另一种高性能的编程方式,那就 Google 的 Sky 项目.Sky 项目使用网页开发语言Dart开发原生Android 应用,强调应用的运行速度和与 Web 的高度集成.Sky将其Web后端也带到了移动开发领域.Sky不依赖于平台,其代码可以运行在Android.iOS,或是任何包含Dart虚拟机的平台上. 可以说sky是Flutter框架的前身. 在 2017年的谷歌 I/O大会上,Google推出了Flutter —— 一款新的用于创建移动应用的开源

文中所有示例代码请点击: gitee.com/yumi0629/Fl… 今天呢,我小拉面主要想给大家讲一讲Flutter中的 Slivers 大家族的使用场景和方法.开发过列表布局的同学们应该对 Slivers 系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌套布局. 比如之前讲Hero的时候提到的下面这个界面,使用普通的GridView的话是没法实现的,我们选择使用 CustomScrollView ,然后在 slivers 属性中添加子控件,在这个例子里,我们可以用Sliv

前言: 最近在自学flutter跨平台开发,从学习的过程来看真心感觉不是那么一件特别容易的事.不但要了解语法规则, 还要知晓常用控件,和一些扩展性的外延知识,所以套一句古人的话“路漫漫其修远矣,无将上下而求索”. 关于Material Design 以下是摘录的一篇非常好的关于“Material Design”的文章,传送门 1.安卓是什么? 想象一下,过年同学聚会上,大家把手机都放在饭桌前,除了各种型号的 iPhone 之外,你还能看到什么品牌的手机呢?我猜一定会有 OPPO.VIVO.魅族.

1.Expanded组件 占满可用空间 -----可以到达类似flex布局中  第一列占用大量空间,所以它必须包装在Expanded widget中. 写死的高度改成Expanded自动撑满屏幕如果还是不能撑满试试加上flex:1的属性 Expanded expands its child to fill the available space --Using an Expanded widget makes a child of a Row, Column, or Flex expand to

1.命令行运行flutter run之后iOS报错:Could not install build/ios/iphones/Runner.app on XXXXX. try lunching Xcode andselecting "Project > Run" to fix the problem open ios/Runner.xworkspace....... 这个恶心的报错,我一直以为是我Xcode的问题,因为早上一直好的,代码未动.而下午什么都没做,就是Xcode升级了下

模拟器中调试元素的布局: Android Studio 右侧边栏 Flutter Inspector,选择 Toggle Debug Paint 打开. 格式化代码: 编辑器中右键 Reformat Code with dartfmt. 使用外部功能包(https://pub.dartlang.org/flutter): 把外部包名加到 pubspec.yaml 的 dependencies 依赖中,运行 flutter packages get 安装,代码中 import 进来使用. 例子内容

在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库. 正如你所想的那样,Flutter 是能够帮助创建拥有漂亮 UI 界面的跨平台移动应用解决方案.Flutter 的界面设计与 web 应用类似,因此,你能够从 Flutter 上找到像使用 HTML/CSS 那样熟悉的感觉. Google 表示: Flutter 将会帮你更容易,更快速的开发出界面美观的移动应用. 听起来很美好,但是首先要说的是,我对其他跨平台解决方案,诸如