我们如何在 flutter 中从底部导航栏启动 url

Question

我使用包 CubertoBottomBar 添加了底部导航栏。我想通过 url_launcher 包在其他浏览器中启动新的 url，当我实现相同时它会抛出一个错误，因为类型 'Future' 不是类型 'Widget' 的子类型，请帮我解决问题。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  Color inactiveColor = Colors.white;
  String currentTitle = "Home";
  Color currentColor = Colors.white;

  final List<Widget> _children = [
    HomePage(),
    Contact(),
    _urlLauncher()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: CubertoBottomBar(
        barBackgroundColor: Colors.orange,
        inactiveIconColor: inactiveColor,
        tabStyle: CubertoTabStyle.STYLE_FADED_BACKGROUND,
        selectedTab: _currentIndex,
        tabs: [
          TabData(iconData: Icons.home, title: "Home", tabColor: Colors.white),
          TabData(iconData: Icons.phone, title: "Contact", tabColor: Colors.white),
          TabData(iconData: Icons.person_outline, title: "Register", tabColor: Colors.white),
        ],
        onTabChangedListener: (position, title, color) {
          setState(() {
            _currentIndex = position;
            currentTitle = title;
            currentColor = color;
          });
        },
      ),
    );
  }
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  static _urlLauncher() async{
    const url = 'https://flutter.dev';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

Answer 1

_urlLauncher() 是一个未来，因此您不能将它添加到小部件列表 List<Widget> 也不能像小部件一样显示它

final List<Widget> _children = [
    HomePage(),
    Contact(),
    _urlLauncher()
  ];

您可以这样做：

将小部件列表中的 _urlLauncher() 更改为 Container，然后像这样调用 onTabChangedListener: 中的函数

final List<Widget> _children = [
    HomePage(),
    Contact(),
    Container()
  ];

onTabChangedListener: (position, title, color) {
   if(position == 2){
     _urlLauncher(); // open in browser if the position is 2
   }else{
     setState(() {
       _currentIndex = position;
       currentTitle = title;
       currentColor = color;
     });
  }   
},

Answer 2

问题在于，它打开了一个url。但仍然需要一个 Widget 来包含它。您的 bottomNavigationBar 需要一页。

解决方法： 将 url_launcher 包裹在 Container() 内，另外，不要忘记在 forceWebView: true 内设置 _urlLauncher().

现在让我们跳转到代码，看看我们如何实现它

final List<Widget> _children = [
    HomePage(),
    Contact(),
    Container()
];

你会很高兴去。另外，现在做 forceWebView

static _urlLauncher() async{
    const url = 'https://flutter.dev';
    if (await canLaunch(url)) {
      await launch(url, forceWebView: true);
    } else {
      throw 'Could not launch $url';
    }
  }

并且让onTabTapped()知道，当按下位置2时，我们必须调用_urlLauncher()方法

void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;

      // here you do the thing
      if (_currentIndex == 2) _urlLauncher();
    });
  }

我们如何在 flutter 中从底部导航栏启动 url

How can we launch the url from the bottom naviagtion bar in flutter

flutter

flutter-bottomnavigation