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

Question

I have added the bottom naviagtion bar using the package CubertoBottomBar. I want to launch the new url in other browser by url_launcher package, when I Implement the same it throws me an error as type 'Future' is not a subtype of type 'Widget', please help me fix the issue.

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';
    }
  }
}

score 2 · Accepted Answer · answered Aug 06 '20 at 10:21

The _urlLauncher() is a future so you cannot add it to a List of widgets List<Widget> nor display it like a widget

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

You can do this instead:

Change the _urlLauncher() in the widget list to a Container then call the function in onTabChangedListener: like this

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;
     });
  }   
},

score 0 · Answer 2 · answered Aug 06 '20 at 10:23

The problem is that, it opens a url. But still needs a Widget to contain it. Your bottomNavigationBar expects a page out of.

Solution: Wrap the url_launcher inside your Container(), and also, don't forget to set the forceWebView: true inside you _urlLauncher().

Now let us jump to the code and see, how we can achieve that

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

And you will be good to go. Also, now doing forceWebView

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

And let the onTabTapped() know that, when position 2 is pressed, we have to call the _urlLauncher() method

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

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

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

2 Answers2