CODEWITHSUNDEEP
dartflutter
S.D.
S.D.

Reputation: 5867

Transparent sticky footer in Flutter

I was following this Stack Overflow post for making a sticky footer. The footer performs like it needs to, but is there a way to add transparency so the items in the list behind the footer can be visible?

Solid footer enter image description here

Transparent footer

enter image description here

Here is all the code for making the solid footer

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(
            child: new ListView.builder(
              itemCount: 200,
              itemBuilder: (context, index) {
                return new ListTile(
                  title: new Text("title $index"),
                );
              },
            ),
          ),
          new Container(
            height: 40.0,
            color: Colors.red,
          ),
        ],
      ),
    );
  }
}

Upvotes: 3

Views: 7369

Answers (1)

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277037

You can use Stack to display widgets on the top of each others.

new Scaffold(
  body: new Stack(
    alignment: Alignment.bottomCenter,
    children: [
      new ListView(...),
      new Container(height: 40.0, color: Colors.red),
    ],
  ),
),

Upvotes: 7

Related Questions