PingViewWidget

PingViewWidget is a simple and customizable animated connecting button widget PingViewWidget

The source code is 100% Dart.

pub package License

Motivation

I need some clean animated 3D view to show ping in my Flutter application.

Getting started

Installing

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

This library is posted in pub.dev

pubspec.yaml

dependencies:  
	ping_view_widget: ^1.0.0

Usage

After Importing this library, you can directly use this view in your Widget tree

import 'package:ping_view_widget/ping_view_widget.dart';
PingViewWidget(
  ispInformationText: TextSpan(
    style: TextStyle(
      color: Colors.black,
      fontSize: 12,
    ),
    children: <TextSpan>[
      TextSpan(
        text: "LOREM SERVER\n",
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w500,
        ),
      ),
      TextSpan(
          text: "São Paulo, Brasil",
          style: TextStyle(color: Colors.grey[600])),
    ],
  ),
  locationInformatinText: TextSpan(
    style: TextStyle(
        color: Colors.grey[600],
        fontSize: 10,
        fontWeight: FontWeight.w500),
    children: <TextSpan>[
      TextSpan(text: "IP Interno: 198.162.1.8\n"),
      TextSpan(text: "IP Externo: 198.162.1.7\n"),
      TextSpan(
        text: "Operadora: Jio",
      ),
    ],
  ),
  techInformationText: TextSpan(
    text: "LTE",
    style: TextStyle(color: Color(0xFF3ebdb8), fontSize: 11),
  ),
)

Customization

Depending on your view you may want to tweak the UI. For now you can these custom attributes

PropertyTypeDescription
'ispInformationText'TextSpanTextSpan Widget to add custom text on ISP server information
'children'ListList of widget to show server name and address ping starts from
'locationInformatinText'TextSpanTextSpan Widget to add custom text on ping end location information
'techInformationText'TextSpanTextSpan Widget to add custom text on technology used for internet

Screenshots

Simulator Screen Shot - iPhone 11 Pro - 2021-08-04 at 07 50 09
pingViewWidgetDemo

Author

  • Saurabh K Sharma - GIT

    I am very new to open source community. All suggestion and improvement are most welcomed.

Contributors

Sorabh/
Sorabh
Rohit
Rohit Kumar Mishra

Contributing

  1. Fork it (github.com/sorbh/animated_round_button_flutter/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Libraries

extension
ping_view_theme_data
ping_view_widget