The last Restaurant finding app I published worked pretty well so I decided to do another one for you guys.

Coding time: 3h20 Minutes.

Source Code: https://github.com/cybdom/RestaurantFinder

So now we can begin!

Top Container:

We have a column with two children, the first being a row of a column with two Text widgets and a CircleAvatar widget. Then we have the Search field consisting of an InputField with a prefixIcon and a Hint as well as an OutlineInputBorder with a borderRadius of 5.0.

BottomAppBar:

We are using a BottomAppBar because we need to have the notch in the FloatingActionButton.

Don’t forget to set the floatingActionButtonLocation to FloatingActionButtonLocation.centerDocked.

Apart from that it’s just a Row with 4 IconButtons.

Star Display:

If you need to create a star count for you own project you may want to use this simple code:

class StarDisplay extends StatelessWidget { final int value; const StarDisplay({Key key, this.value = 0}) : assert(value != null), super(key: key); @override Widget build(BuildContext context) { return Row( mainAxisSize: MainAxisSize.min, children: List.generate(5, (index) { return Icon( index < value ? Icons.star : Icons.star_border, color: index < value ? Colors.orange : Colors.black, ); }), ); } }

The container it self is pretty straight forward, but if you have any questions please feel free to contact me.

My Custom Button:

class MyCustomButton extends StatelessWidget { final bool active; final String title; const MyCustomButton({Key key, this.active, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Material( color: Colors.transparent, child: InkWell( onTap: () {}, child: Container( width: 115, alignment: Alignment.center, decoration: BoxDecoration( border: !active ? Border.all(color: Colors.grey[100]) : null, borderRadius: BorderRadius.circular(21.0), gradient: active ? LinearGradient(colors: [Colors.yellow, Colors.orange]) : null, color: active ? null : Colors.white, boxShadow: [ active ? BoxShadow( color: Colors.yellow, offset: Offset(0, 3), blurRadius: 5.0, ) : BoxShadow() ], ), padding: EdgeInsets.symmetric(horizontal: 21.0, vertical: 5.0), margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 7.0), child: Text( title, style: TextStyle(color: active ? Colors.white : Colors.grey[500]), ), ), ), ); } }

Now let’s get to the second screen!

Restaurant Page:

The Kindof a stack:

I’ve chosen to use a container with a background image then I gave it a column as a child. Take a look at the code to get a better idea:

Container( padding: EdgeInsets.all(15), height: MediaQuery.of(context).size.height / 1.9, width: MediaQuery.of(context).size.width, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/imgs/meat.jpg'), fit: BoxFit.cover, ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Row( children: <Widget>[ RoundButton(icon: Icons.arrow_back_ios), Spacer(), RoundButton(icon: Icons.favorite_border), SizedBox(width: 5.0), RoundButton(icon: Icons.ac_unit), ], ), Container( margin: EdgeInsets.only(bottom: 51), padding: EdgeInsets.symmetric(horizontal: 15, vertical: 5), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(21), ), child: Text( "\$125", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 21), ), ), ], ), ),

The bottom Part:

This part is pretty straight forward too, a Container for the borderRadius, a column to host everything a few Text widgets here and there and there you go a beautiful Restaurant app UI made in flutter.

It took me 3h20min ( I don’t know where I wasted time but my PC was running slow because of the heat ).

Thank you for your time, please feel free to use and modify the code as you wish.

If you like the content please share it as much as you can.

See you next time!