Flutter 入门：让 App 学会“看”网页

周六晚上，小鹿把手机怼到我脸上：“Suno的AI音乐太酷了！帮我写个App，能下载那些灰色按钮的歌。”作为相亲八次才脱单的程序员，我叹了口气：“行吧，正好拿你练手Flutter。”

从零踩坑

我一直写后端Java，移动端是小白。但Flutter对新手友好，Dart语法跟Java七分像。用flutter create搭好项目后，第一个坑就来了：Suno页面全靠JavaScript渲染，普通HTTP请求拿到的HTML空空如也。

“得用无头浏览器。”我自语道。小鹿抬头：“什么头？”“看你的《甄嬛传》。”

核心思路：让Flutter学会“看”网页

Flutter做爬虫虽偏门，但webview_flutter包让思路清晰起来——内嵌浏览器加载页面，等列表渲染完，注入JavaScript抓数据。

_controller.runJavaScriptReturningResult('''
  JSON.stringify(
    Array.from(document.querySelectorAll('.song-item'))
      .map(item => ({
        title: item.querySelector('.title').innerText,
        url: item.querySelector('audio').src
      }))
  )
''');

一套Dart代码双端运行，连爬虫逻辑都不用改，真香。但反爬才是头疼的：频繁请求触发验证码，我连封三次IP。后来加上请求间隔和User-Agent伪装才稳定下来。这个小项目耗了我一个周末加三个晚上，有次调试到凌晨一点，第二天差点迟到。

交付时刻

周三晚上，我把APK装到小鹿手机上。她搜到喜欢的歌，点击下载，手机响起铃声的瞬间，她跳起来抱了我一下。那一刻，熬夜全值了。界面简陋得像2003年的网页，但她只在乎“男朋友给我做了专属App”。发到闺蜜群后，收获一堆“你男朋友好厉害”，我知道这不过是套壳浏览器加爬虫脚本，但技术价值在于解决了谁的问题。

实在话

想学Flutter，别光看文档，找个真实需求练手。有deadline和用户反馈，比刷教程快十倍。爬虫务必注意分寸，我这个App仅在小鹿手机上个人使用，这是底线。

现在她铃声全是Suno生成的歌，每次响起都说：“我男朋友写的App下载的。”我靠着Flutter和爬虫，在女朋友心里的技术形象又高了一点。虽然她至今分不清Java和JavaScript，但代码真的可以用来宠女朋友。