Gradient background - new feature

[ervindobri]

title

[Shiba-Kar]

Yes I too have a use case

[Shiba-Kar]

For now do this...

bottomNavigationBar: Stack(
          children: [
            Container(
              height: 60.h,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [purple, secondary],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
                borderRadius: BorderRadius.vertical(top: Radius.circular(30.h)),
              ),
            ),
            AnimatedBottomNavigationBar.builder(
              itemCount: _navItems.length,
              height: 60.h,
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              tabBuilder: (index, isActive) => Column(
                children: [
                  const Spacer(),
                  Image(
                    image: AssetImage(_navItems[index]['image']),
                    color: !isActive ? Colors.white : convas,
                  ),
                  Text(
                    _navItems[index]['name'],
                    style: TextStyle(
                      fontWeight:
                          !isActive ? FontWeight.normal : FontWeight.bold,
                      color: !isActive ? Colors.white : convas,
                    ),
                  ),
                  const Spacer(),
                ],
              ),
              activeIndex: _activeIndex,
              leftCornerRadius: 15.w,
              rightCornerRadius: 15.w,
              gapLocation: GapLocation.none,
              onTap: (index) => setState(() => _activeIndex = index),
              //other params
            ),
          ],
        ),

[ervindobri]

Yeah this works

For now do this...

bottomNavigationBar: Stack(
          children: [
            Container(
              height: 60.h,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [purple, secondary],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
                borderRadius: BorderRadius.vertical(top: Radius.circular(30.h)),
              ),
            ),
            AnimatedBottomNavigationBar.builder(
              itemCount: _navItems.length,
              height: 60.h,
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              tabBuilder: (index, isActive) => Column(
                children: [
                  const Spacer(),
                  Image(
                    image: AssetImage(_navItems[index]['image']),
                    color: !isActive ? Colors.white : convas,
                  ),
                  Text(
                    _navItems[index]['name'],
                    style: TextStyle(
                      fontWeight:
                          !isActive ? FontWeight.normal : FontWeight.bold,
                      color: !isActive ? Colors.white : convas,
                    ),
                  ),
                  const Spacer(),
                ],
              ),
              activeIndex: _activeIndex,
              leftCornerRadius: 15.w,
              rightCornerRadius: 15.w,
              gapLocation: GapLocation.none,
              onTap: (index) => setState(() => _activeIndex = index),
              //other params
            ),
          ],
        ),

Yes I too have a use case

This works if you don't need to display a notch/ FAB, otherwise I found myself using a custom clipper with painter.

example:

CustomPaint(
                  painter: NotchPainter(right: 10, holeRadius: 70),
                  child: ClipPath(
                    clipper: NotchClipper(right: 10, holeRadius: 70),
                    child: Container(
                      decoration: BoxDecoration(
                          boxShadow: GlobalStyles.elevationShadow(),
                          gradient: LinearGradient(
                                  colors: [Colors.black, Colors.white])),
                      child: AnimatedBottomNavigationBar.builder(....)
)));

[vizhan-lanars]

Version 1.0.0