Flutter中WebView下面弹出内容布局

在这里插入图片描述

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

class TranformWebViewBottom extends StatefulWidget {
  @override
  _TranformWebViewBottomState createState() => _TranformWebViewBottomState();
}

class _TranformWebViewBottomState extends State<TranformWebViewBottom> {
  double _height = 0;
  Color _color = Colors.red;
  @override
  Widget build(BuildContext context) {
    var duration = Duration(seconds: 2);
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView底部弹出动画'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('弹出'),
        onPressed: (){
          setState(() {
            _height = 200;
            _color = Colors.blue;
          });
        },
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
                child: InAppWebView(
                  initialUrl: "https://item.m.jd.com/ware/view.action?wareId=100003582705&sid=null",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
  
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
  
                  },
                  onLoadStop: (InAppWebViewController controller, String url) {
  
                  },
                ),
              ),
          ),
          AnimatedContainer(
              duration: duration,
              height: _height,
              width: MediaQuery.of(context).size.width,
              color: _color,
              child: Text(
                  "AnimatedContainer",
                  style: TextStyle(color: Colors.white),
                ),
            ),
        ],
      )
    );
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值