web_spa_flutter 0.0.1 copy "web_spa_flutter: ^0.0.1" to clipboard
web_spa_flutter: ^0.0.1 copied to clipboard

Published 2 years ago
SDKFlutter
PlatformAndroidiOSmacOS
→

Metadata

When load html file, you can create html application.

More...

load_spa_application #

jsonファイルに書かれた内容を表示するpackageです。
メニューの作成、コンテンツの表示を行うことができます。
表示するコンテンツとして、htmlを読み込み画面上に表示させます。

Getting Started #

  1. 本パッケージを読み込みます。
  2. jsonファイルを作成します。
  3. jsonファイルをassetsに配置します。
    または、Webサーバーに配置します。
    例）assets/app.json
  4. import
  5. WebSpaWidgetを初期化します。
    例）assetsから取得する場合、isLocal: true, path: "assets/app.json" 　　Webサーバから取得する場合、isLocal: false, path: "http://xxxx"
const WebSpaWidget(isLocal: true, path: "assets/json/app.json")

実装例 #

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const WebSpaWidget(isLocal: true, path: "assets/json/app.json"),
      // home: const WebSpaWidget(isLocal: false, path: "https://xxxx"),
    );
  }
}

jsonについて #

{
    "header": {
        "icon": {
            "url": "http://xxxx",
            "width": 40,
            "height": 40
        },
        "title": "example",
        "background_color": "FF99E9EA"
    },
    "menu": {
        "type": "bottom_menu",
        "background_color": "FF99E9EA",
        "selected_text_color": "FF3F48CC",
        "unselected_text_color": "FF000000",
        "items": [
            {
                "name": "menu1",
                "icon": {
                    "url": "http://xxxx",
                    "width": 40,
                    "height": 40
                },
                "display_id": "display1",
                "order": 1
            },
            {
                "name": "menu2",
                "icon": {
                    "url": "http://xxxx",
                    "width": 40,
                    "height": 40
                },
                "display_id": "display2",
                "order": 2
            },
            {
                "name": "menu3",
                "icon": {
                    "url": "http://xxxx",
                    "width": 40,
                    "height": 40
                },
                "display_id": "display3",
                "order": 3
            },
            {
                "name": "menu4",
                "icon": {
                    "url": "http://xxxx",
                    "width": 40,
                    "height": 40
                },
                "display_id": "display4",
                "order": 4
            }
        ]
    },
    "displays": [
        {
            "display_id": "display1",
            "type": "web_view",
            "contents": [
                {
                    "type": "outer_web_file",
                    "url": "https://pub.flutter-io.cn/"
                }
            ]
        },
        {
            "display_id": "display2",
            "type": "web_view",
            "contents": [
                {
                    "type": "outer_web_file",
                    "url": "https://dart.cn/"
                }
            ]
        },
        {
            "display_id": "display3",
            "type": "external_browser",
            "contents": [
                {
                    "type": "outer_web_file",
                    "url": "https://dart.cn/"
                }
            ]
        },
        {
            "display_id": "display4",
            "type": "web_view",
            "contents": [
                {
                    "type": "inner_web_file",
                    "url": "assets/html/test.html",
                    "links": [
                        {
                            "trigger_url": "https://pub.flutter-io.cn/",
                            "type": "display",
                            "reference_target": "display1"
                        },
                        {
                            "trigger_url": "https://fuchsia.dev/",
                            "type": "web_view",
                            "reference_target": "https://dart.cn/"
                        },
                        {
                            "trigger_url": "https://flutter.cn/",
                            "type": "external_browser",
                            "reference_target": "https://flutter.cn/"
                        }
                    ]
                }
            ]
        }
    ]
}
key value
icon ヘッダーに表示するアイコンの情報。
title ヘッダーに表示するタイトル名
, iconが存在しない場合に表示する
文字列で表記
background_color ヘッダーの背景色
, 16進数のargbで表記		 
{
  "header": {
    "icon": {
      "url": "https://xxxx.png",
      "width": 40,
      "height": 40
    },
    "title": "nanana",
    "background_color": "FFFFF200"
  }
}

icon #

key value
url アイコン画像の参照先url
文字列で表記
width アイコンの横幅
整数値で表記
height アイコンの縦幅
整数値で表記		 
"icon": {
  "url": "https://xxxx.png",
  "width": 40,
  "height": 40
}
key value
type メニューのタイプを選択する
下メニュー: bottom_menu
横メニュー: left_side_menu
background_color メニューの背景色
16進数のargbで表記
unselected_text_color 選択中のメニューの文字色
unselected_text_color 非選択のメニューの文字色
items メニューに表示する要素の一覧 
"menu": {
  "type": "navigation_menu",
  "background_color": "FFFFF200",
  "items": [
    {
      "name": "menu1",
      "icon": {
        "url": "https://xxxx.png",
        "width": 40,
        "height": 40
      },
      "display_id": "display1",
      "order": 1
    }
  ]
},

items #

key value
name メニュー名
文字列で表記
icon メニューに表示するアイコン
display_id メニューをタップした際に表示する画面のid
displayのdisplay_idを使用文字列で表記
order メニュー内での表示位置
1が最初の要素
整数値で表記		 
{
  "items": [
    {
      "name": "menu1",
      "icon": {
        "url": "https://xxxx.png",
        "width": 40,
        "height": 40
      },
      "display_id": "display1",
      "order": 1
    },
    {
      "name": "menu2",
      "icon": {
        "url": "https://xxxx.png",
        "width": 40,
        "height": 40
      },
      "display_id": "display2",
      "order": 2
    }
  ]
}

display #

key value
display_id itemsと連動するユニークid
文字列で表記
type WebView表示: web_view
外部ブラウザ表示: external_browser
contents WebView, 外部ブラウザにてコンテンツを表示する
TODO:将来的には複数コンテンツの表示ができるようにする		 
{
  "display": [
    {
      "display_id": "display1",
      "type": "web_view",
      "contents": [
        {
          "type": "inner_web_file",
          "url": "file://xxxxx.html"
        }
      ]
    },
    {
      "display_id": "display2",
      "type": "external_browser",
    }
  ]  
}

contents #

key value
type 外部htmlを表示: outer_web_file,アプリ内htmlを表示: inner_web_file
※外部ブラウザ表示は、outer_web_fileの場合のみ可能
url 表示するコンテンツのurl
links WebView上で特定のurlのページにアクセスした際の動作を設定
network_image_viewを使用している場合は、画像をタップした時の動作を定義		 
{
  "contents": [
    {
      "type": "outer_web_file",
      "url": "https://xxxxx",
      "links": []
    },
    {
      "url": "https://xxxxx"
    },
  ]
}
key value
trigger_url トリガーとなるurl
※リダイレクト先のurlを指定し、external_browserを使用しないこと
type trigger_urlにアクセスした際の動作タイプ
display,external_browser, web_view
reference_target trigger_urlにアクセスした際の参照先
画面遷移はdisplay_id, Web表示はurlを入力

※ trigger_urlが重複する場合、
　 reference_display_id > reference_web_view_url > reference_external_browser_urlの優先順位で動作する。

{
  "links": [
    {
        "trigger_url": "https://xxxxx",
        "type": "display",
        "reference_target": "display1"
    },
    {
        "trigger_url": "https://xxxxx",
        "type": "external_browser",
        "reference_target": "https://xxxxx"
    },
    {
        "trigger_url": "https://xxxxx",
        "type": "web_view",
        "reference_target": "https://xxxxx"
    }
  ]
}

← Metadata

0
likes
130
points
0
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

When load html file, you can create html application.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, http, provider, url_launcher, webview_flutter, webview_flutter_web

More

Packages that depend on web_spa_flutter

Back