在Flutter中使用永久背景图像

Question

I am working on an app with a 2 tab view and want a permanent background image while being able to swipe or navigate between the 2 tabs. Here is the code for the widget:

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {

  TabController controller;

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Divot', style: new TextStyle(fontFamily: 'Pacifico')),
        centerTitle: true,
        backgroundColor: Colors.green,
        bottom: new TabBar(
          controller: controller,
            tabs: <Tab>[
              new Tab(icon: new Icon(Icons.golf_course)),
              new Tab(icon: new Icon(Icons.account_circle)),
            ]),
      ),
      body: new Stack(
        children: <Widget>[
          new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(image: new AssetImage("image"), fit: BoxFit.fill,),
            ),
          ),
          new TabBarView(
            controller: controller,
              children: <Widget>[
                new second.GameMenu(),
                new third.MyProfilePage(),
              ],
          )
        ],
      )
    );
  }
}

I get no errors, but I get a white background on the first tab, and my AssetImage background on the second tab. What am I missing?

Answer 1

In Android this would have been much easier, all you had to do was set the background property in the XML file and its that simple.

In flutter i would suggest in the body property of the Scaffold, in the TabBarView children you might try to pass Widgets with backgrounds. Or try setting the backgroundColor property of most of your widgets to Colors.transparent .

Answer 2

I know this is an old question but just in case...

I got the effect you want by using a Container as the Scaffold body: and making TabBarView the child: of the Container. You can then use...

decoration: BoxDecoration(
            image: DecorationImage(
              image:
                  AssetImage("some image path"),
              fit: BoxFit.cover,
              colorFilter: ColorFilter.mode(
                  Colors.black.withOpacity(0.4), BlendMode.dstATop),

to create the background which appears on each tab view :-)