超过百万的StackOverflow Flutter 问题

概述老孟导读：今天分享StackOverflow上高访问量的20大问题，这些问题给我一种特别熟悉的感觉，我想你一定或多或少的遇到过，有的问题在stackoverflow上有几十万的阅读量，说明很多人都遇到

老孟导读：今天分享StackOverflow上高访问量的20大问题，这些问题给我一种特别熟悉的感觉，我想你一定或多或少的遇到过，有的问题在stackoverflow上有几十万的阅读量，说明很多人都遇到了这些问题，把这些问题整理分享给大家，每期20个，每隔2周分享一次。

如何实现AndroID平台的wrap_content 和match_parent

你可以按照如下方式实现：

1、WIDth = Wrap_content Height=Wrap_content：

Wrap(  children: <Widget>[your_child])

2、WIDth = Match_parent Height=Match_parent：

Container(        height: double.infinity,wIDth: double.infinity,child:your_child)

3、WIDth = Match_parent,Height = Wrap_conten：

Row(  mainAxisSize: MainAxisSize.max,children: <Widget>[*your_child*],);

4、WIDth = Wrap_content,Height = Match_parent：

Column(  mainAxisSize: MainAxisSize.max,children: <Widget>[your_child],);

如何避免FutureBuilder频繁执行future方法

错误用法：

@overrIDeWidget build(BuildContext context) {  return FutureBuilder(    future: httpCall(),builder: (context,snapshot) {         },);}

正确用法：

class _ExampleState extends State<Example> {  Future<int> future;  @overrIDe  voID initState() {    future = Future.value(42);    super.initState();  }  @overrIDe  Widget build(BuildContext context) {    return FutureBuilder(      future: future,snapshot) {             },);  }}

底部导航切换导致重建问题

在使用底部导航时经常会使用如下写法：

Widget _currentbody;@overrIDeWidget build(BuildContext context) {  return Scaffold(    body: _currentbody,bottomNavigationbar: BottomNavigationbar(      items: <BottomNavigationbarItem>[      	...      ],onTap: (index) {        _bottomNavigationChange(index);      },),);}_bottomNavigationChange(int index) {  switch (index) {    case 0:      _currentbody = OnePage();      break;    case 1:      _currentbody = TwoPage();      break;    case 2:      _currentbody = ThreePage();      break;  }  setState(() {});}

此用法导致每次切换时都会重建页面。

解决办法，使用IndexedStack：

int _currIndex;@overrIDeWidget build(BuildContext context) {  return Scaffold(    body: IndexedStack(        index: _currIndex,children: <Widget>[OnePage(),TwoPage(),ThreePage()],);}_bottomNavigationChange(int index) {  setState(() {      _currIndex = index;    });}

Tabbar切换导致重建（build）问题

通常情况下，使用TabbarVIEw如下：

TabbarVIEw(  controller: this._tabController,children: <Widget>[    _buildTabVIEw1(),_buildTabVIEw2(),],)

此时切换tab时，页面会重建，解决方法设置PageStorageKey：

var _newsKey = PageStorageKey('news');var _technologyKey = PageStorageKey('technology');TabbarVIEw(  controller: this._tabController,children: <Widget>[    _buildTabVIEw1(_newsKey),_buildTabVIEw2(_technologyKey),)

Stack 子组件设置了宽高不起作用

在Stack中设置100x100红色盒子，如下：

Center(  child: Container(    height: 300,wIDth: 300,color: colors.blue,child: Stack(      children: <Widget>[        positioned.fill(          child: Container(            height: 100,wIDth: 100,color: colors.red,)      ],)

此时红色盒子充满父组件，解决办法，给红色盒子组件包裹Center、Align或者UnconstrainedBox，代码如下：

positioned.fill(  child: Align(    child: Container(      height: 100,)

如何在State类中获取StatefulWidget控件的属性

class Test extends StatefulWidget {  Test({this.data});  final int data;  @overrIDe  State<StatefulWidget> createState() => _TestState();}class _TestState extends State<Test>{}

如下，如何在_TestState获取到Test的data数据呢：

在_TestState也定义同样的参数，此方式比较麻烦，不推荐。直接使用Widget.data（推荐）。default value of optional parameter must be constant

上面的异常在类构造函数的时候会经常遇见，如下面的代码就会出现此异常：

class barrageItem extends StatefulWidget {  barrageItem(      { this.text,this.duration = Duration(seconds: 3)});

异常信息提示：可选参数必须为常量，修改如下：

const Duration _kDuration = Duration(seconds: 3);class barrageItem extends StatefulWidget {  barrageItem(      {this.text,this.duration = _kDuration});

定义一个常量，Dart中常量通常使用k开头，_表示私有，只能在当前包内使用，别问我为什么如此命名，问就是源代码中就是如此命名的。

如何移除deBUG模式下右上角“DEBUG”标识

MaterialApp( deBUGShowCheckedModeBanner: false)

如何使用16进制的颜色值

下面的用法是无法显示颜色的：

color(0xb74093)

因为color的构造函数是ARGB，所以需要加上透明度，正确用法：

color(0xFFb74093)

FF表示完全不透明。

如何改变应用程序的icon和名称

链接：https://blog.csdn.net/mengks1987/article/details/95306508

如何给TextFIEld设置初始值

class _FooState extends State<Foo> {  TextEditingController _controller;  @overrIDe  voID initState() {    super.initState();    _controller = new TextEditingController(text: '初始值');  }  @overrIDe  Widget build(BuildContext context) {    return TextFIEld(          controller: _controller,);  }}

Scaffold.of() called with a context that does not contain a Scaffold

Scaffold.of()中的context没有包含在Scaffold中，如下代码就会报此异常：

class HomePage extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return Scaffold(      appbar: Appbar(        Title: Text('老孟'),body: Center(        child: Raisedbutton(          color: colors.pink,textcolor: colors.white,onpressed: _displaySnackbar(context),child: Text('show Snackbar'),);  }}_displaySnackbar(BuildContext context) {  final snackbar = Snackbar(content: Text('老孟'));  Scaffold.of(context).showSnackbar(snackbar);}

注意此时的context是HomePage的，HomePage并没有包含在Scaffold中，所以并不是调用在Scaffold中就可以，而是看context，修改如下：

_scaffoldKey.currentState.showSnackbar(snackbar); 

或者：

Scaffold(    appbar: Appbar(        Title: Text('老孟'),body: Builder(        builder: (context) =>             Center(            child: Raisedbutton(            color: colors.pink,onpressed: () => _displaySnackbar(context),child: Text('老孟'),);

Waiting for another Flutter command to release the startup lock

在执行Flutter命令时经常遇到上面的问题，

解决办法一：

1、Mac或者linux在终端执行如下命令：

killall -9 dart

2、Window执行如下命令：

taskkill /F /IM dart.exe

解决办法二：

删除Flutter SDK的目录下/bin/cache/lockfile文件。

无法调用setState

不能在StatelessWidget控件中调用了，需要在StatefulWidget中调用。

设置当前控件大小为父控件大小的百分比

1、使用FractionallySizedBox控件

2、获取父控件的大小并乘以百分比：

Mediaquery.of(context).size.wIDth * 0.5

Row直接包裹TextFIEld异常：BoxConstraints forces an infinite wIDth

解决方法：

Row(	children: <Widget>[		Flexible(			child: new TextFIEld(),

TextFIEld 动态获取焦点和失去焦点

获取焦点：

FocusScope.of(context).requestFocus(_focusNode);

_focusNode为TextFIEld的focusNode：

_focusNode = FocusNode();TextFIEld(	focusNode: _focusNode,...)

失去焦点：

_focusNode.unfocus();

如何判断当前平台

import 'dart:io' show Platform;if (Platform.isAndroID) {  // AndroID-specific code} else if (Platform.isIOS) {  // iOS-specific code}

平台类型包括：

Platform.isAndroIDPlatform.isFuchsiaPlatform.isIOSPlatform.islinuxPlatform.isMacOSPlatform.iswindows

AndroID无法访问http

其实这本身不是Flutter的问题，但在开发中经常遇到，在AndroID PIE版本及以上和IOS 系统上默认禁止访问http，主要是为了安全考虑。

AndroID解决办法：

在./androID/app/src/main/AndroIDManifest.xml配置文件中application标签里面设置networkSecurityConfig属性:

<?xml version="1.0" enCoding="utf-8"?><manifest ... >    <application androID:networkSecurityConfig="@xml/network_security_config">		 <!-- ... -->    </application></manifest>

在./androID/app/src/main/res目录下创建XML文件夹（已存在不用创建），在xml文件夹下创建network_security_config.xml文件，内容如下：

<?xml version="1.0" enCoding="utf-8"?><network-security-config>    <base-config cleartextTrafficPermitted="true">        <trust-anchors>            <certificates src="system" />        </trust-anchors>    </base-config></network-security-config>

IOS无法访问http

在./ios/Runner/Info.pList文件中添加如下：

<?xml version="1.0" enCoding="UTF-8"?><!DOCTYPE pList PUBliC "-//Apple//DTD PList 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><pList version="1.0"><dict>	...	<key>NSAppTransportSecurity</key>	<dict>		<key>NSAllowsArbitraryLoads</key>		<true/>	</dict></dict></pList>

交流

Github地址：https://github.com/781238222/flutter-do

170+组件详细用法：http://laomengit.com

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter生态建设离不开你我他，需要大家共同的努力，点赞也是其中的一种，如果文章帮助到了你，希望点个赞。

总结

以上是内存溢出为你收集整理的超过百万的StackOverflow Flutter 问题全部内容，希望文章能够帮你解决超过百万的StackOverflow Flutter 问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。