smart_bubble 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 70

Smart Bubble Widget #

English Version 一个可自适应大小的聊天气泡Flutter组件

实现原理 #

气泡由背景(气泡本身)和内容(child)组成,当一起渲染时,无法得知内容所占大小,所以没法在第一次渲染时让气泡和内容正好合适。 这里使用完成状态监听,配合GlobalKey获取child组件渲染后的大小,从而再次调整气泡大小,从而使得气泡可以跟随内部元素进行自适应。

当组件initState时,对完成状态添加监听器:

  @override
  void initState() {
    super.initState();
    _widgetsBinding = WidgetsBinding.instance;
    _widgetsBinding.addPostFrameCallback((callback) {
      RenderObject object = _key.currentContext.findRenderObject();
      Size mSize = object.semanticBounds.size;
      _superSetState(() {
        height = mSize.height + padding.vertical;
        width = mSize.width + padding.horizontal;
      });
    });
  }

    void _superSetState(callback) {
    setState(() {
      callback();
    });
  }

当组件第一次build结束后,内部元素child已有确定的大小,内部对child使用了OverflowBox进行包裹,使内部元素可以超出外部组件,从而使比如Text()组件能够正常伸展,无法伸展了再回行。

child: OverflowBox(
                      maxWidth: MediaQuery.of(context).size.width - 70,
                      child: Container(
                        child: this.child,
                        key: _key,
                      ),
                    )

简言之,就是对build进行监听,build完成后获取内部组件大小,然后setState()更改外部气泡大小以适应。

参数 #

maxWidth → double 最大宽度,第一次渲染时气泡的宽度,内部OverFlowBox限制了child最大不能超过屏幕宽度-70,设置过小会导致内部元素超出宽度,导致部分不可见。可设的非常大不会布局溢出。用户无法看到第一次渲染时非常大的气泡。 默认值: 200.0

maxHeight → double 最大高度,第一次渲染时气泡的高度,设置过小会导致下方超出布局的内容不可见,可设置非常大不会布局溢出。用户无法看到第一次渲染时非常大的气泡。 默认值:2048.0

color → Color 气泡颜色 默认值:蓝色Colors.blue

borderColor → Color 边框颜色 可缺省

arrowDirection → ArrowDirection 气泡箭头方向 可选值:左(ArrowDirection.left),右(ArrowDirection.right) 默认值ArrowDirection.right

child → Widget 子元素,已测试过图片和文字

title → Text 气泡标题,气泡上方的文字 可缺省

padding → EdgeInsets 气泡到内部组件的距离 默认值EdgeInsets.symmetric(horizontal: 20, vertical: 15)

其他参数请参考内部气泡原作者

使用样例 #

SmartBubble(
    title: Text("192.168.31.1"),
    arrowDirection: ArrowDirection.left,
    child: Text("Hello",style: TextStyle(color: Colors.white, fontSize: 30)),
),
SmartBubble(
    title: Text("192.168.31.1"),
    child: Image.asset("assets/3.png")
),

截图 #

截图 截图

引用 #

使用了StevenHu_Sir的不能自适应大小的气泡 点此跳转,并在此基础上新增了自适应大小和左上方箭头

English #

An auto-fit chat bubble of Flutter Widget

How it work #

Bubble contains bubble itself and its child. When widget rending as build(). We can not know the size of the child. So we use a listener to callback when build() is finished. After build(), we measure child and resize the bubble. We use GlobalKey() to get child size. Use WidgetsBinding to callback.

When initState(), add complete build() listener.

  @override
  void initState() {
    super.initState();
    _widgetsBinding = WidgetsBinding.instance;
    _widgetsBinding.addPostFrameCallback((callback) {
      RenderObject object = _key.currentContext.findRenderObject();
      Size mSize = object.semanticBounds.size;
      _superSetState(() {
        height = mSize.height + padding.vertical;
        width = mSize.width + padding.horizontal;
      });
    });
  }

    void _superSetState(callback) {
    setState(() {
      callback();
    });
  }

After first build, we can now get the size of the child. Since the child is wrapped by OverflowBox() so it will auto expand to a comfort size. Especially useful when child is Text. It will expand horizontally to the max then expand vertically.

child: OverflowBox(
                      maxWidth: MediaQuery.of(context).size.width - 70,
                      child: Container(
                        child: this.child,
                        key: _key,
                      ),
                    )

Params #

maxWidth → double Max width. the bubble width when first render. No negative effect when set a large number. But will cause part of child hidden when set a small number. Inside OverflowBox() is set maxWidth so it's ok to set a very large number if you want to expand max. User will NOT see the large bubble when first render. Default: 200.0

maxHeight → double Max height. the bubble height when first render. No negative effect when set a large number. But will cause part of child hidden when set a small number. User will NOT see the large bubble when first render.

color → Color Bubble's color Default: Colors.blue

borderColor → Color Bubble's border color can be null

arrowDirection → ArrowDirection Direction of the bubble's arrow. Options: ArrowDirection.left, ArrowDirection.right Default: ArrowDirection.right

child → Widget child widget. had tested picture and Text

title → Text Title of the Bubble can be null

Other params please refer to the original bubble's author.

Example #

SmartBubble(
    title: Text("192.168.31.1"),
    arrowDirection: ArrowDirection.left,
    child: Text("Hello",style: TextStyle(color: Colors.white, fontSize: 30)),
),
SmartBubble(
    title: Text("192.168.31.1"),
    child: Image.asset("assets/3.png")
),

Reference #

Used StevenHu_Sir's NO AUTO-FIT Bubble Click here, and add left top arrow and auto-fit function.

1.0.0 #

initial submit

1.0.1 #

fix issues

TODO: Selectable bubble

example/lib/main.dart

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:smart_bubble/smart_bubble.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      platformVersion = await SmartBubble.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  smart_bubble: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:smart_bubble/smart_bubble.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
40
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
70
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/bubble.dart. (-0.50 points)

Analysis of lib/bubble.dart reported 1 hint:

line 12 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: BubbleWidget.arrHeight, BubbleWidget.arrAngle, BubbleWidget.radius, BubbleWidget.length, BubbleWidget.color, BubbleWidget.borderColor, BubbleWidget.innerPadding

Format lib/smart_bubble_widget.dart.

Run flutter format to format lib/smart_bubble_widget.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test