添付した画像のようにボトムナビゲーションバーを作成しようとしていますが、うまくいかないようです。以下は私が試したものです。
bottomNavigationBar: Container(
margin: EdgeInsets.only(left: 5, right: 5),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200), topRight: Radius.circular(200)),
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.deepOrange,
unselectedItemColor: Colors.grey,
iconSize: 0,
items: [
BottomNavigationBarItem(
label: 'Banking',
icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
BottomNavigationBarItem(
label: 'Social', icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
BottomNavigationBarItem(
label: 'GTLocate',
icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
BottomNavigationBarItem(
label: 'iReport',
icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
BottomNavigationBarItem(
label: 'GTTraffic',
icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
],
),
),
これが私がやりたいことですここに画像の説明を入力してください
これは私が現在ここに画像の説明を入力しているものです
結果を得るには、下部のナビゲーションバーの最初のアイテムを除くすべてのアイテムに背景色の左側の境界線のみを使用できます。あなたが提供したデザインに近いカスタムの下部ナビゲーションバーを作成しました：
これを確認してください：ImageNavBar-Dartpad
必要に応じて、高さ、画像、色を調整します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加