如何在flutter中使stack控件在ios上全屏显示

tjvv9vkg 于 2023-02-13 发布在 Flutter

关注(0)|答案(2)|浏览(248)

我正在尝试做一个音频播放器应用程序，我想让播放器屏幕适合整个屏幕大小。
然而，顶部和底部的填充没有帮助。
我尝试从bottomNavigationBar和其他小部件中删除SafeArea，但没有成功。
我该怎么办？
玩家图片：
(the灰色填充不会让图像拉伸到最后）

the code of the player:

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: const Color(0xff1c1c1e),
      body: GetBuilder<OverlayHandler>(
        builder: (getContext) {
          if (!Get.find<OverlayHandler>().inPipMode) {
              return Stack(
                children:[
                  Container(...)
                ]
              ); // player at full screen
          } else {
              return Stack(...); // player at PiP mode 
          }
        }
      )
    );
}

主屏widget代码：

Widget build(BuildContext context) {
    return GetBuilder<NavigationController>(
        builder: (controller) {
          return Scaffold(
            body: SafeArea(
            // bottom option of this SafeArea doesn't affect the player size
              child: IndexedStack(
                index: controller.tabIndex,
                children: const [
                   ...
                ],
              ),
            ),
            bottomNavigationBar: SafeArea( 
            // bottom option of this SafeArea doesn't affect the player size
              child: SizedBox(
                height: 80,
                child: BottomNavigationBar(
                  items: [
                    ...
                  ],
                ),
              ),
            ),
          );
        }

    );
  }
}

flutter

来源：https://stackoverflow.com/questions/73876132/how-to-make-a-stack-widget-take-full-screen-on-ios-in-flutter

2条答案

按热度按时间

ulydmbyx1#

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

TextEditingController controller = TextEditingController();
bool hasHash = false;

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: double.infinity,
            decoration: const BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                  "https://cdn.pixabay.com/photo/2016/09/10/11/11/musician-1658887_1280.jpg",
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 300,
              width: double.infinity,
              color: Colors.black.withOpacity(.7),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: const [
                  Icon(
                    Icons.skip_previous_rounded,
                    size: 55,
                    color: Colors.white,
                  ),
                  Icon(
                    Icons.play_circle_fill_rounded,
                    size: 110,
                    color: Colors.white,
                  ),
                  Icon(
                    Icons.skip_next_rounded,
                    size: 55,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

安卓截图