I want to make appear transparent while scrolling listview..I have tried with using stackoverflow coding but looks like this effort is nothing for making what I want to make...

Appear should be convert into transparent and Listview items should be displayed behind transparent appear

here is my basic level code

import 'package:flutter/material.dart';
import 'dart:io';

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectIndex = 0;
  bool isAppbarCollapsing = false;
  final ScrollController _homeController = new ScrollController();

  List<String> notelist = [
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K','L','M','N','O','P','Q','R','S','T','U','V'
  ];


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _initializeController();

  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _homeController.dispose();
  }

  void _initializeController(){
    _homeController.addListener(() {
      if(_homeController.offset == 0.0 && !_homeController.position.outOfRange){
        //Fully expanded situation
        if(!mounted) return;
        setState(() => isAppbarCollapsing = false);
      }
      if(_homeController.offset >= 9.0 && !_homeController.position.outOfRange){
        //Collapsing situation
        if(!mounted) return;
        setState(()  => isAppbarCollapsing = true);
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: Text('Transparent Demo'),
          backgroundColor: isAppbarCollapsing ?Colors.transparent:Colors.blue,

      ),
      body: MyBody(),
    );
  }

  Widget MyBody() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                controller: _homeController,
                  shrinkWrap: true,
                  itemCount: notelist.length,
                  itemBuilder: (context, index) {
                    return Card(
                      color: Colors.orange,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0)),
                      child: ListTile(
                        onTap: (){
                       },
                        title: Text(notelist[index]),
                        leading: CircleAvatar(
                          radius: 30.0,
                          child: Text(notelist[index][0],style:
                          TextStyle(
                            color: Colors.white,
                          ),),
                        ),
                        trailing: Icon(Icons.delete),
                      ),
                    );
                  }),
            ),
          ],
        ),
      ),
    );
  }


}

CodePudding user response：

Add extendBodyBehindAppBar and set it to true, make elevation 0. Try the code below

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectIndex = 0;
  bool isAppbarCollapsing = false;
  final ScrollController _homeController = new ScrollController();

  List<String> notelist = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V'
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _initializeController();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _homeController.dispose();
  }

  void _initializeController() {
    _homeController.addListener(() {
      if (_homeController.offset == 0.0 &&
          !_homeController.position.outOfRange) {
        //Fully expanded situation
        if (!mounted) return;
        setState(() => isAppbarCollapsing = false);
      }
      if (_homeController.offset >= 9.0 &&
          !_homeController.position.outOfRange) {
        //Collapsing situation
        if (!mounted) return;
        setState(() => isAppbarCollapsing = true);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text('Transparent Demo'),
        elevation: 0,
        backgroundColor: isAppbarCollapsing ? Colors.transparent : Colors.blue,
      ),
      body: MyBody(),
    );
  }

  Widget MyBody() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                  controller: _homeController,
                  shrinkWrap: true,
                  itemCount: notelist.length,
                  itemBuilder: (context, index) {
                    return Card(
                      color: Colors.orange,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0)),
                      child: ListTile(
                        onTap: () {},
                        title: Text(notelist[index]),
                        leading: CircleAvatar(
                          radius: 30.0,
                          child: Text(
                            notelist[index][0],
                            style: TextStyle(
                              color: Colors.white,
                            ),
                          ),
                        ),
                        trailing: Icon(Icons.delete),
                      ),
                    );
                  }),
            ),
          ],
        ),
      ),
    );
  }
}