[2021/05/22更新]FlutterでWebスクレイピング(QiitaのマイページからLGTMの数を取得)

# coding: UTF-8
import requests
from bs4 import BeautifulSoup

# 自分のアカウントのQiitaのマイページのURL
url = "https://qiita.com/toda-axiaworks"
headers = {"User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"}
response = requests.get(url=url, headers=headers)
html = response.content
soup = BeautifulSoup(html, "html.parser")

# セレクタは、上記の記事を参考に記述しました
selector = "span.css-mf9wc5"

print(soup.select_one(selector).text)

python qiita_lgtm.py

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  universal_html: ^1.2.4 // 今回インストールするライブラリ
(以下略)

pub get

import 'package:flutter/material.dart';
import 'package:universal_html/driver.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Qiita LGTM',
      theme: ThemeData(
        primarySwatch: Colors.lightGreen,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyLgtmNumberPage(),
    );
  }
}

class MyLgtmNumberPage extends StatefulWidget {
  @override
  _MyLgtmNumberPageState createState() => _MyLgtmNumberPageState();
}

class _MyLgtmNumberPageState extends State<MyLgtmNumberPage> {
  // 最終的にはBaseURLにAPIから取得したユーザーIDを渡せば良さそう
  static const url = 'https://qiita.com/toda-axiaworks';

  String _lgtmNumber = '';

  @override
  void initState() {
    super.initState();

    _getQiitaLgtmNumber();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Qiita LGTM Sample',
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Center(
        child: _lgtmNumber.isNotEmpty
            ? _RoundLgtm(
                label: _lgtmNumber,
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.refresh,
          color: Colors.white,
        ),
        onPressed: _getQiitaLgtmNumber,
      ),
    );
  }

  _getQiitaLgtmNumber() async {
    final driver = HtmlDriver();
    await driver.setDocumentFromUri(Uri.parse(url));

    setState(() {
      _lgtmNumber = driver.document
          .querySelector("span.css-mf9wc5")
          .text;
    });
  }
}

// LGTM数を表示する円型のWidget
class _RoundLgtm extends StatelessWidget {
  const _RoundLgtm({
    this.label,
  });

  final String label;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.lightGreen,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            label,
            style: TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            'LGTM',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }
}