Is it possible to convert an Android Fragment into Flutter Widget?

Question

I have a Native Android Fragment and I need to use inside a flutter project.

Inside a Android Project when you need to use a fragment something like

 supportFragmentManager.beginTransaction()
                            .replace(R.id.content_fragment, it1,
                                    "name")
                            .commit()

I would like to embed this fragment along with a BottonNavigationBar (second option for example).

I tried to follow some tutorials as:

https://medium.com/flutter-community/flutter-platformview-how-to-create-flutter-widgets-from-native-views-366e378115b6

https://60devs.com/how-to-add-native-code-to-flutter-app-using-platform-views-android.html

But I wasn`t able to adapt these tutorials for fragment or even activities becase they talk about Views.

Does anyone have any suggestions?

Obs: Just to clarify, I need to use a native screen inside a flutter screen.

Answer 1

I used this, in a similar problem:

class DetailsScreen extends StatefulWidget {
 @override
 DetailsScreenState createState() {
   return DetailsScreenState();
  }
}

class DetailsScreenState extends State<DetailsScreen>
   with SingleTickerProviderStateMixin {
 TabController tabController;

 @override
 void initState() {
   tabController = new TabController(length: 4, vsync: this);
   super.initState();
 }

 @override
 void dispose() {
  tabController.dispose();
  super.dispose();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(67.0),
        child: AppBar(
          elevation: 10.0,
          automaticallyImplyLeading: false,
          flexibleSpace: Padding(
            padding: const EdgeInsets.only(top: 0.0),
            child: SafeArea(
              child: getTabBar(),
            ),
          ),
        ),
      ),
      body: getTabBarPages());
 }

 Widget getTabBar() {
   return TabBar(controller: tabController, tabs: [
    Tab(
        text: AppLocalizations.of(context).translate("nav_dieta"),
        icon: Icon(MdiIcons.silverwareForkKnife)),
    Tab(
        text: AppLocalizations.of(context).translate("nav_exercise"),
        icon: Icon(MdiIcons.dumbbell)),
    Tab(
        text: AppLocalizations.of(context).translate("_news"),
        icon: Icon(MdiIcons.newspaper)),
    Tab(
        text: AppLocalizations.of(context).translate("nav_info"),
        icon: Icon(MdiIcons.accountDetails)),
  ]);
 }

 Widget getTabBarPages() {
   return TabBarView(
      controller: tabController,
      physics: NeverScrollableScrollPhysics(),
      children: <Widget>[
        MealPlanScreen(),
        ExerciseScreen(),
        Container(color: Colors.blue),
        Container(color: Colors.yellow)
      ]);
 }
}

Where MealPlanScreen and ExerciseScreen are StatefulWidget and those two Containers will be replaced with other classes that contain StatefulWidget.

Answer 2

But you can use flutter BottomNavigationBar

here is a demo of BottomNavigationBar

and it looks same as Bottomnavigation with fragment in android

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 index = 0;

  void currentindex(value) {
    setState(() {
      this.index = value;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          MdiIcons.flower,
          color: Colors.white,
        ),
        title: Text(
          widget.title,
          style: TextStyle(color: Colors.white),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.human),
            title: Text("User"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.imageAlbum),
            title: Text("Theme"),
          ),
        ],
        onTap: (index) => currentindex(index),
        elevation: 19.0,
        currentIndex: index,
      ),
      body: Navtabwidget()[this.index],
    );
  }

  List<Widget> Navtabwidget() {
    return [
      Homewidget(),
      Userlistwidget(),
      Settingwidget(),
    ];
  }
}

i hope it helps