bones_ui_bootstrap 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 69

Bones UI Bootstrap #

pub package CI GitHub Tag New Commits Last Commits Pull Requests Code size License

Adds Bootstrap to Dart package Bones UI, allowing use of Bootstrap components and CSS.

Embedded JavaScript Libraries #

This package automatically loads (and bundles) the necessaries JavaScript libraries for Bootstrap.

  • Bootstrap: 4.4.1
  • JQuery: 3.5.1
  • Moment: 2.25.2

NOTE: You don't need to add any HTML or JavaScript code to your project to have full integration of Bootstrap with Bones_UI.

Usage #

A simple usage example:

import 'dart:html';

import 'package:bones_ui/bones_ui.dart';
import 'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';

class MyUI extends UIRoot {
  MyUI(Element rootContainer) : super(rootContainer);

  @override
  void configure() {
    Bootstrap.load();
  }

  @override
  UIComponent renderContent() {
    return MyPage(content) ;
  }

}

class MyPage extends UIComponent {
  MyPage(Element parent) : super(parent);

  @override
  dynamic render() {
    return [
      $header(content: '''
        <nav class="navbar navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#">Fixed navbar</a>
        </nav>
      '''),
      $div(classes: 'container', content: '''
        <br>
        <h1 class="mt-5">Welcome</h1>
        This is <b>Bones_UI</b> with <b>Bootstrap</b>!
      '''),
      $footer(
          classes: 'footer fixed-bottom',
          content: [
            $hr,
            $div(
              classes: 'container text-muted pb-2',
              content: 'Copyright © ${ DateTime.now().year } Some Example')
          ]
      )
    ];
  }
}

void main() {

  var output = document.querySelector('#output');

  var myUI = MyUI( output ) ;
  myUI.initialize() ;

}

Bootstrap Icons #

You can use class BootstrapIcons to load SVG icons of Bootstrap Icons.


  var iconName = 'person-fill' ;
  var iconPath = BootstrapIcons.getIconPath(iconName) ;
  var svg = UISVG(parent, iconPath, width: '1.5em', color: '#0000FF', title: 'User') ;

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Colossus.Services #

This is an open-source project from Colossus.Services: the gateway for smooth solutions.

Author #

Graciliano M. Passos: gmpassos@GitHub.

License #

Apache License - Version 2.0

1.0.3 #

  • BSDateRangePicker: Fix a Dart issue with JS calling a Dart Object method: Circumvent using lambda with optional parameters as callback.
  • dartfmt.

1.0.2 #

  • bones_ui: ^1.0.12
  • dom_tools: ^1.3.2

1.0.1 #

  • Add API Documentation.
  • Added example for BootstrapIcons.

1.0.0 #

  • Initial version, created by Stagehand

example/main.dart

import 'dart:html';

import 'package:bones_ui/bones_ui.dart';
import 'package:bones_ui_bootstrap/bones_ui_bootstrap.dart';

class MyUI extends UIRoot {
  MyUI(Element rootContainer) : super(rootContainer);

  @override
  void configure() {
    Bootstrap.load();
  }

  @override
  UIComponent renderContent() {
    return MyPage(content);
  }
}

class MyPage extends UIComponent {
  MyPage(Element parent) : super(parent);

  @override
  dynamic render() {
    return [
      $header(content: '''
        <nav class="navbar navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#">Fixed navbar</a>
        </nav>
      '''),
      $div(classes: 'container', content: '''
        <br>
        <h1 class="mt-5">Welcome</h1>
        This is <b>Bones_UI</b> with <b>Bootstrap</b>!
      '''),
      $footer(classes: 'footer fixed-bottom', content: [
        $hr,
        $div(
            classes: 'container text-muted pb-2',
            content: 'Copyright © ${DateTime.now().year} Some Example')
      ])
    ];
  }
}

void main() {
  var output = document.querySelector('#output');

  var myUI = MyUI(output);
  myUI.initialize();
}

Use this package as a library

1. Depend on it

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


dependencies:
  bones_ui_bootstrap: ^1.0.3

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or 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:bones_ui_bootstrap/bones_ui_bootstrap.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
39
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]
69
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14

Analysis suggestions

Package not compatible with runtime flutter-native on android

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on ios

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on linux

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on macos

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on windows

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Package not compatible with runtime native

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Package not compatible with runtime native-aot

Because:

  • package:bones_ui_bootstrap/bones_ui_bootstrap.dart that imports:
  • package:bones_ui_bootstrap/src/components/daterangepicker.dart that imports:
  • package:bones_ui_bootstrap/src/bones_ui_bootstrap_base.dart that imports:
  • package:bones_ui/bones_ui.dart that imports:
  • package:bones_ui/src/bones_ui_explorer.dart that imports:
  • package:json_render/json_render.dart that imports:
  • package:json_render/src/json_render_types.dart that imports:
  • package:json_render/src/json_render_base.dart that imports:
  • package:json_render/src/json_render_media.dart that imports:
  • package:dom_tools/dom_tools.dart that imports:
  • package:dom_tools/src/perspective_filter.dart that imports:
  • package:dom_tools/src/dom_tools_paint.dart that imports:
  • dart:html

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
amdjs ^1.0.3 1.0.3
bones_ui ^1.0.12 1.0.12
dom_tools ^1.3.2 1.3.2
intl_messages ^1.1.8 1.1.8
swiss_knife ^2.5.2 2.5.3
Transitive dependencies
args 1.6.0
charcode 1.1.3
chart_engine 1.0.11
collection 1.14.13 1.15.0-nullsafety
csslib 0.16.1
dom_builder 1.0.7
enum_to_string 1.0.9
expressions 0.1.5
html 0.14.0+3
html_unescape 1.0.1+3
intl 0.16.1
js 0.6.2
json_object_mapper 1.0.0
json_render 1.3.3
markdown 2.1.5
matcher 0.12.8
mercury_client 1.1.8
meta 1.2.2 1.3.0-nullsafety
path 1.7.0
petitparser 3.0.4
quiver 2.1.3
resource_portable 2.1.7
service_worker 0.2.4
source_span 1.7.0
stack_trace 1.9.5
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.2.0 1.3.0-nullsafety
yaml 2.2.1
Dev dependencies
build_runner ^1.10.0
build_web_compilers ^2.11.0
pedantic ^1.9.0
test ^1.14.6