How to create custom half bottom navigation layout

Question

I am trying to create a custom UI for bottom navigation bar. Anyone has any idea how to do something like this.

Example: only show navigation buttons in the blue half, and leave the yellow part empty.

Answer 1

  bottomNavigationBar:Stack(
    children: <Widget>[
      Container(width: 150,height: 60,color: Colors.yellowAccent,),
      Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
        child:Row(
          children: <Widget>[
            Container(width: 0.4*MediaQuery.of(context).size.width,height: 60,),
            **Container(constraints: BoxConstraints(maxWidth: 0.6*MediaQuery.of(context).size.width),
              child: BottomNavigationBar(**
                elevation: 0,
                currentIndex: index,
                onTap: changeIndex,
                selectedItemColor: Colors.deepOrange,
                type: BottomNavigationBarType.fixed,
                items: [
                  BottomNavigationBarItem(
                    backgroundColor: Color.fromRGBO(0, 0, 0, 0),
                    icon: Padding(
                      padding: const EdgeInsets.only(top: 4),
                      child: Container(
                        width: 30,
                        child: Container(
                          height: 30,
                          width: 30,
                          child: Icon(Icons.access_alarm),
                        ),
                      ),
                    ),
                    title: Text(
                      '',
                      style: TextStyle(
                        fontSize: 0,
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    icon: Padding(
                      padding: const EdgeInsets.only(top: 4),
                      child: Container(
                        width: 30,
                        child: Container(
                          height: 30,
                          width: 30,
                          child: Icon(Icons.access_alarm),
                        ),
                      ),
                    ),
                    title: Text(
                      '',
                      style: TextStyle(
                        fontSize: 0,
                      ),
                    ),
                  ),
                  BottomNavigationBarItem(
                    icon: Padding(
                      padding: const EdgeInsets.only(top: 4),
                      child: Container(
                        width: 30,
                        child: Container(
                          height: 30,
                          width: 30,
                          child: Icon(Icons.access_alarm),
                        ),
                      ),
                    ),
                    title: Text(
                      '',
                      style: TextStyle(
                        fontSize: 0,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),