Skip to main content

100 Flutter常见FQA

1 如何修改flutter的启动图标?​

flutter_launcher_icons是一个图标修改命令行库，通过个库能快速修改Android、IOS LINUX 、Mac OS和Windows的 启动图标.

1.1 安装flutter_launcher_icons​

$ flutter pub add flutter_launcher_icons

1.2 添加flutter_launcher_icons到pubspec.yaml​

...
dev_dependencies:
  flutter_launcher_icons: ^0.11.0


flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icons/launcher_icon/launcher_icon.jpeg"
  min_sdk_android: 21 # android min sdk min:16, default 21
  web:
    generate: true
    image_path: "assets/icons/launcher_icon/launcher_icon.jpeg"
#    background_color: "#hexcode"
#    theme_color: "#hexcode"
  windows:
    generate: true
    image_path: "assets/icons/launcher_icon/launcher_icon.jpeg"
    icon_size: 48 # min:48, max:256, default: 48
  macos:
    generate: true
    image_path: "assets/icons/launcher_icon/launcher_icon.jpeg"

1.3 添加启动图标的图片​

把图片添加到assets/icons/launcher_icon/launcher_icon.jpeg

1.4 进行图标替换​

$  flutter pub run flutter_launcher_icons

查看已经在各个平台下改动的启动图标文件
$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
    (use "git restore <file>..." to discard changes in working directory)
    modified:   android/app/src/main/AndroidManifest.xml
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
    modified:   ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_32.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png
    modified:   macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_64.png
    modified:   pubspec.lock
    modified:   pubspec.yaml
    modified:   web/favicon.png
    modified:   web/icons/Icon-192.png
    modified:   web/icons/Icon-512.png
    modified:   web/icons/Icon-maskable-192.png
    modified:   web/icons/Icon-maskable-512.png
    modified:   web/manifest.json
    modified:   windows/runner/resources/app_icon.ico

2 Flutter在不使用Appbar时，状态栏如何保持不遮挡?​

使用SafeArea可规避状态栏被遮挡的问题. 

import 'package:flutter/material.dart';

Scaffold(
  body: SafeArea( child: Column( children: [] )),
);

3 如何修改flutter的包名?​

3.1 如何在创建flutter时指定包名?​

如想要创建一个应用的包名: com.wuchuheng.app
$ flutter create --org com.wuchuheng.app appname

3.2 如何修改已有项目的包名?​

3.2.1 修改android的包名​

$ flutter pub add -d change_app_package_name
$ flutter pub run change_app_package_name:main com.wuchuheng.app

2.2 如何修改IOS的包名​

In Xcode > select Runner > In general tab you can change the bundle Identifier.

4 如何用flutter画个点?​

Container(
  height: 10,
  width: 10,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
)

5 flutter如何隐藏溢出的视图?​

Container(
      height: 100,
      width: 200,
      child: SizedOverflowBox(
        size: Size(200, 100),
        child: ListView(
          physics: const NeverScrollableScrollPhysics(),
          children: [
            Text("1"),
            Text("2"),
            Text("3"),
            Text("4"),
            Text("5"),
            Text("6"),
            Text("7"),
            Text("8"),
            Text("9"),
            Text("10"),
            Text("11"),
            Text("12"),
            Text("13"),
            Text("14"),
            Text("15"),
          ],
        ),
      ),
    );

6 flutter如何设置透明度​

6.1 设置背景颜色整透明度​

  child: Container(
    decoration: BoxDecoration(
      color: Colors.black.withOpacity(0.5), // 设置container的背景颜色透明度不涉及子组件
      borderRadius:
      BorderRadius.all(Radius.circular(4)),
    ),
    child: Text(
      '送半年VIP会员',
      style: TextStyle(
      fontSize: 10, color: HexColor('#DB7450')),
    ),
  ),

6.2 设置子组件全体的透明度​

Opacity(
    opacity: 0.5, //from 0-1, 0.5 = 50% opacity
    child: Container(),
),