Use SliverList and cache content height

[QuncCccccc]

Fixes #1694
This PR is to fix the shaking scrollbar problem. We replace the ListViews with CustomScrollView and cache the content height to provide a better estimation for the max scroll offset.

Same changes are applied to both Material 3 demo in the root directory and the M3 demo in the /experimental/

Screen.Recording.2023-05-10.at.4.05.27.PM.mov

two_cols.mov

Pre-launch Checklist

• I read the [Flutter Style Guide] recently, and have followed its advice.
• I signed the [CLA].
• I read the [Contributors Guide].
• I updated/added relevant documentation (doc comments with ///).
• All existing and new tests are passing.

[domesticmouse]

You'll need to pull from main to have a chance at getting a (mostly) green CI.

[HansMuller]

LGTM

[HansMuller]

Suggested change

	// Based on the fact that the list content is fixed, we cache
	// the height of the content during the first-time scrolling.
	// The cached height can be used to override
	// `SliverChildDelegate.estimateMaxScrollOffset`, to avoid a shaking scrollbar.
	// If the content of a CustomScrollView does not change, then it's
	// safe to cache the heights of each item as they are laid out. The
	// sum of the cached heights are returned by an override of
	// `SliverChildDelegate.estimateMaxScrollOffset`. The default version
	// of this method bases its estimate on the average height of the
	// visible items. The override ensures that the scrollbar thumb's
	// size, which depends on the max scroll offset, will shrink smoothly
	// as the contents of the list are exposed for the first time, and
	// then remain fixed.

[HansMuller]

See suggested rewrite for the experimental version of this comment