Flutter31.Opensource China主界面My的搭建和网络请求(03)

网络请求

profile_page.dart对布局进行了填充，最上面的头像的布局和下面的条目的布局，_login()是网络请求相关的逻辑，使用WevView来实现

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp2/constants/Constants.dart';

import 'login_web_page.dart';

/**
 * 主界面My
 */
class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  List menuTitles = [
    '我的消息',
    '阅读记录',
    '我的博客',
    '我的问答',
    '我的活动',
    '我的团队',
    '邀请好友',
  ];
  List menuIcons = [
    Icons.message,
    Icons.print,
    Icons.error,
    Icons.phone,
    Icons.send,
    Icons.people,
    Icons.person,
  ];
  String userAvatar;
  String userName;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: (context, index) {
          //My界面的头部
          if(index == 0){
            //头像用Container装起来
            return _buildHeader();
          }
          index -= 1;
          return ListTile(
            leading: Icon(menuIcons[index]),
            title: Text(menuTitles[index]),
            trailing: Icon(Icons.arrow_forward_ios),//尾巴
            onTap: () {
              _login();
            },
          );
        },
        //分割线
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: menuTitles.length + 1
    );
  }

  _login() async {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => LoginWebPage()));
  }

  Container _buildHeader() {
    return Container(
            height: 150.0,
            color: Color(AppColors.APP_THEME),
            //头像的布局填充
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  GestureDetector(
                    child: Container(
                      width: 60.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: Color(0xffffffff),
                          width: 2.0,
                        ),
                        image: DecorationImage(
                          //加载网路图片
                          image: AssetImage('assets/images/ic_avatar_default.png'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    onTap: () {
                      //执行登录
                      _login();
                    },
                  ),
                  SizedBox(

                  ),
                  Text(
                    '点击头像登录',
                    style: TextStyle(color: Color(0xffffffff)),
                  ),
                ],
              ),
            ),
          );
  }
}

login_web_page.dart使用webview加载html相关的文件pubspec.yaml中需要增加webview相关的支持

引入flutter_webview_plugin: ^0.3.11 代码如下

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutterapp2/constants/Constants.dart';

class LoginWebPage extends StatefulWidget {
  @override
  _LoginWebPageState createState() => _LoginWebPageState();
}

class _LoginWebPageState extends State<LoginWebPage> {
  FlutterWebviewPlugin _flutterWebviewPlugin = FlutterWebviewPlugin();
  bool isLoading = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //监听url的变化
    _flutterWebviewPlugin.onUrlChanged.listen((url) {
      //https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=6i4Yu6IUqXnR64em0rsJ&redirect_uri=https://www.dongnaoedu.com/
      print('LoginWebPage onUrlChanged: $url');
      if (mounted) {
        setState(() {
          isLoading = true;
        });
      }

    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _flutterWebviewPlugin.close();
  }

  @override
  Widget build(BuildContext context) {
  //authorize?response_type=code&client_id=s6BhdRkqt3&state=xyz&redirect_uri=https
    List<Widget> _appBarTitle = [
      Text(
        '登录开源中国',
        style: TextStyle(
          color: Color(AppColors.APPBAR),
        ),
      ),
    ];
    if(isLoading) {
      _appBarTitle.add(SizedBox(
        width: 10.0,
      ));
      _appBarTitle.add(CupertinoActivityIndicator());
    }
    return WebviewScaffold(
      url: AppUrls.OAUTH2_AUTHORIZE +
          '?response_type=code&client_id=' +
          AppInfos.CLIENT_ID +
          '&redirect_uri=' +
          AppInfos.REDIRECT_URI,
      appBar: AppBar(
        title: Row(
          children: _appBarTitle,
        ),
      ),
      withJavascript: true,//允许执行js
      withLocalStorage: true,//允许本地存储
      withZoom: true,//允许网页缩放
    );
  }
}

Constants.dart相关的常量

abstract class AppColors{
  //应用主题色
  static const APP_THEME = 0xff63ca6c;
  static const APPBAR = 0xffffffff;
}

abstract class AppInfos {
  static const String CLIENT_ID = '6ZmjMJ4ZCW7YRhQ4sm42';//应用id
  static const String CLIENT_SECRET = 'sXWCxyV1KegoF2gethYuBZhI8WQI9fjk';//应用密钥
  static const String REDIRECT_URI = 'https://www.dongnaoedu.com/';//回调地址
}

abstract class AppUrls {
  static const String HOST = 'https://www.oschina.net';

  //授权登录 ctrl shift u
  static const String OAUTH2_AUTHORIZE = HOST + '/action/oauth2/authorize';
  //获取token
  static const String OAUTH2_TOKEN = HOST + '/action/openapi/token';
  //获取用户信息
  static const String OPENAPI_USER = HOST + '/action/openapi/user';
  static const String MY_INFORMATION = HOST + '/action/openapi/my_information';
  static const String MESSAGE_LIST = HOST + '/action/openapi/message_list';
  static const String NEWS_LIST = HOST + '/action/openapi/news_list';
  static const String NEWS_DETAIL = HOST + '/action/openapi/news_detail';
  static const String TWEET_LIST = HOST + '/action/openapi/tweet_list';
  static const String TWEET_PUB = HOST + '/action/openapi/tweet_pub';
}

pubspec.yaml

name: flutterapp1
description: A new Flutter application.


publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  http: ^0.12.1
  flutter_webview_plugin: ^0.3.11
  shared_preferences: ^0.5.7+3
  event_bus: ^1.1.1
  sensors: ^0.4.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:
  uses-material-design: true
  assets:
    - assets/images/ic_nav_news_normal.png
    - assets/images/ic_nav_news_actived.png
    - assets/images/ic_nav_tweet_normal.png
    - assets/images/ic_nav_tweet_actived.png
    - assets/images/ic_nav_discover_normal.png
    - assets/images/ic_nav_discover_actived.png
    - assets/images/ic_nav_my_normal.png
    - assets/images/ic_nav_my_pressed.png
    #Drawer
    - assets/images/cover_img.jpg
    - #用户默认头像
    - assets/images/ic_avatar_default.png
    - #摇一摇背景图
    - assets/images/shake.png

log输出如下：

I/flutter (19572): LoginWebPage onUrlChanged: https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=6ZmjMJ4ZCW7YRhQ4sm42&redirect_uri=https://www.dongnaoedu.com/

效果如下图