緒論

最近Front-Endを勉強している途中でFlutterと知り合った.
そこで今勉強しながら、Front-Endと人工知能モデルの連動を体現してみました.

本題

Flutterとは?

モバイルアプリケーション、Webアプリケーション、デスクトップアプリケーションを単一のコードライブラリに開発できるフレームワークを開発しました.

n/a言語

Fluth言語:dart
言語は良くて、情報:html、javascript
私が知っている言語:python

Front-Endスケッチ

実施進捗:Back-end->MQTT->Front-End

インプリメンテーションプロセス

幸いなことに、私が作成するアプリケーションの基本フレームワークは、FlutterのWebサイトの例で実現されています.
私が使うフレームワークはBottomNavigationBarclassです

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
    Text(
      'Index 3: Settings',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.red,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
            backgroundColor: Colors.green,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
            backgroundColor: Colors.purple,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
            backgroundColor: Colors.pink,
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

一覧に難所がない.
最初のAndroid StudioでFluthProjectを作成したときに表示されるmain.基本的なテキストウィジェット(Bar Index)をdartファイルに貼り付け、Bottom Navigation Barを実装します.
(駆動画像がWebサイトに表示されます.)
今これを炒めて、計画通りに実現します.
一番最初にやりたいのは気象ラベル部分です
他のラベルはapiを受け入れ,値や指定位置などを別々に割り当てるなど詳細な調整が必要であるが,Weatherは低形式のapiを画面に送信するだけでよいと考えている.
ここで最初にやったのはgoogling
最初はそんなapiがあると思っていたので、あちこち探しました.
韓国でも、海外でもweather apiを打つときに最初に登場するサイトはopen weather mapです.

(open weather map : https://openweathermap.org/ )
ここでは緯度、経度などの位置値を利用して、その地域の気象情報を無料で利用したり、各都市、国の気象情報を知ることができるapiを利用したりすることができます.
まずapiがどのように構成されているかを決定します.

Open weather map api詳細構成

coord
緯度
経度
weather
てんきじょうたい
ㄴ天気パラメータの組み合わせ(雨、雪、強風など)
ㄴコンビネーション内の天気状態
id
main
現在の温度
さいこうおんど
最低温度(temp min)
くうきあつ
湿気
wind
風速
風向き
風の世紀
ここで使うのはこれだけです.
スクリーン上で実現

こうして出てきた(fontまたはiconは単独で適用されます.)
今、最高、最低、風力などは良いのですが、計画通りには出せません.
他のサイトが気象画面通りに出てくるかなと思って色々探しましたがデータが出てきました
計画通りに進めばapiは使えないようなので、別の方法を考えます.
今回見つけた方法はUrllauncherを使う方法です

UrlLauncher

Browserのパッケージをアプリケーション画面で開くのを支援します.
基本構造:

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

const String _url = 'https://flutter.dev';

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: RaisedButton(
              onPressed: _launchURL,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

void _launchURL() async {
  if (!await launch(_url)) throw 'Could not launch $_url';
}

アドレスをurlとして指定し、画面で実行する方法.
適用結果:

新しいウィンドウで昇ります.
私が欲しいのは新しいウィンドウではなく、現在のラベルにいっぱい露出しています.
ではこれも除外します
他に方法があるかもしれませんが、もう一度探してみると、もう一つあります.
Webviewパッケージです.

webview_flutter

アプリケーション画面で直接送信されるflutパッケージ
適用結果:
私が望むようにサイトが現れます.(naverとgoogleは彼らを止めたのか、ゲーム会社nexonで代わったのか)
今残っているのは、その画面を送信しているサイトを見つけることです.
探してみたが、間もなく、幸いにもすぐに発見された.
https://www.ventusky.com/
地図に世界の気象情報を体現するサイト.
今すぐ適用します.
適用結果:
ついに願いがかなった.

n/a.結論

字面的には短いですが、これを探して実現するのに1~2週間近くかかりました.
でも、まだホームから始まっていないので、グロエセティンまで・・・
やるべきことは泰山だ.
頑張って行こう