是否可以将 Android Fragment 转换为 Flutter Widget？答案

【问题标题】：Is it possible to convert an Android Fragment into Flutter Widget?是否可以将 Android Fragment 转换为 Flutter Widget？
【发布时间】：2019-12-11 19:30:31
【问题描述】：

我有一个 Native Android Fragment，需要在 Flutter 项目中使用。

当您需要使用类似片段的 Android 项目时

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

我想将此片段与 BottonNavigationBar 一起嵌入（例如第二个选项）。

我尝试按照以下教程进行操作：

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

但我无法将这些教程改编为片段甚至活动，因为它们谈论的是视图。

有人有什么建议吗？

Obs：澄清一下，我需要在颤振屏幕中使用原生屏幕。

【问题讨论】：

标签： android flutter

【解决方案1】：

但你可以使用颤振BottomNavigationBar

这里是BottomNavigationBar的演示

它看起来与Bottomnavigation 和fragment 在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(),
    ];
  }
}

希望对你有帮助

【讨论】：

【解决方案2】：

我在类似的问题中使用过这个：

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

MealPlanScreen 和 ExerciseScreen 是 StatefulWidget，这两个 Container 将被替换为包含 StatefulWidget 的其他类。

【讨论】：

感谢您的回答，但我需要插入一个 Native Fragment 作为 getTabBarPages 的一项。