CODEWITHSUNDEEP
flutter
user20415294
user20415294

Reputation:

BottomNavigationbar: How to make the child container's height the same as the bar's?

I want to create a bottomnavigationbar for my Flutter app, which will contain the company's logo and a text side by side. This is my code:

bottomNavigationBar: Container(
  padding: const EdgeInsets.all(10),
  alignment: Alignment.bottomCenter,
  width: MediaQuery.of(context).size.width,
  height: 100, //how do I make it the default height of the bottomnavbar?
  decoration: BoxDecoration(
      color: Colors.yellow,
      border: Border.all(
          color: Colors.black, // Set border color
          width: 3.0),   // Set border width
      borderRadius: const BorderRadius.all(
          Radius.circular(10.0)), // Set rounded corner radius
      boxShadow: const [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
  ),
  child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const <Widget>[
        Image(
          image: AssetImage('images/company_logo.png'),
          height: 90,
        ),
        SizedBox(
          width: 15,
        ),
        Text("DEVELOPED BY COMPANY_NAME",style: TextStyle(fontWeight: FontWeight.bold, fontFamily: 'Lobster'))
      ]
  )
)

I want the height of the child Container() to have the same default height as that of the bottomnavbar. How do I proceed?

Upvotes: 1

Views: 31

Answers (1)

Sachin Kumawat
Sachin Kumawat

Reputation: 447

bottomNavigationBar: Container(
  padding: const EdgeInsets.all(10), //get error with image height remove this
  alignment: Alignment.bottomCenter,
  width: MediaQuery.of(context).size.width,
  height: kBottomNavigationBarHeight, //get default height of the BottomNavigationBar
  decoration: BoxDecoration(
      color: Colors.yellow,
      border: Border.all(
          color: Colors.black, // Set border color
          width: 3.0),   // Set border width
      borderRadius: const BorderRadius.all(
          Radius.circular(10.0)), // Set rounded corner radius
      boxShadow: const [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
  ),
  child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const <Widget>[
        Image(
          image: AssetImage('images/company_logo.png'),
          height: kBottomNavigationBarHeight,
        ),
        SizedBox(
          width: 15,
        ),
        Text("DEVELOPED BY COMPANY_NAME",style: TextStyle(fontWeight: FontWeight.bold, fontFamily: 'Lobster'))
      ]
  )
)

Upvotes: 1

Related Questions