PingViewWidget

PingViewWidget is a simple and customizable animated connecting button widget PingViewWidget

The source code is 100% Dart.

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

Property	Type	Description
'ispInformationText'	TextSpan	TextSpan Widget to add custom text on ISP server information
'children'	List	List of widget to show server name and address ping starts from
'locationInformatinText'	TextSpan	TextSpan Widget to add custom text on ping end location information
'techInformationText'	TextSpan	TextSpan Widget to add custom text on technology used for internet