DEV Community

Chandrasekar Kuppusamy
Chandrasekar Kuppusamy

Posted on • Originally published at Medium on

Flutter widgets and layouts in minutes

#flutterui #flutter #flutterio #flutterwave

Flutter widgets and layouts in minutes - Part I

Ever tried of learning fast?. Do you think it’s possible?

Now, Introducing FlutterExamples , the ultimate cheatsheet of curated examples, designs, layouts and widgets.

Github — https://github.com/TakeoffAndroid/FlutterExamples

What’s special?

The idea behind creating this repo is to learn flutter UI faster as easy as possible in minutes. Then, how? I know it’s been striking everyone’s head. Let’s see some of the beloved examples to analyse this much.

Trust me! No explanation! No theoritical proofs!

Container


Container(
 padding: const EdgeInsets.all(0.0),
 color: Colors.cyanAccent,
 width: 80.0,
 height: 80.0,
),
Enter fullscreen mode Exit fullscreen mode

Center


Center(child: Container(
  padding: const EdgeInsets.all(0.0),
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
))
Enter fullscreen mode Exit fullscreen mode

Align


Bottom Align (Left, center and right)


Center Align (Left, center and right)


Top Align (Left, center and right)

Align(
  alignment: Alignment.center, 
  child: Container(
  padding: const EdgeInsets.all(0.0),
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
))
Enter fullscreen mode Exit fullscreen mode

Padding


Padding(
  padding: EdgeInsets.fromLTRB(24, 32, 24, 32) ,
  child: Container(
  padding: const EdgeInsets.all(0.0),
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
))
Enter fullscreen mode Exit fullscreen mode

SizedBox


SizedBox(
  width: 200.0,
  height: 100.0,
  child: Card(
    color: Colors.indigoAccent,
    child: Center(
        child: Text('SizedBox',
            style: TextStyle(color: Colors.white)
         )
       )
     )
   )
Enter fullscreen mode Exit fullscreen mode

Expanded


Row


Column

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.cyan, height: 80),
      flex: 2,
    ),
    Expanded(
      child: Container(color: Colors.indigoAccent, height: 80),
      flex: 3,
    ),
    Expanded(
      child: Container(color: Colors.orange, height: 80),
      flex: 4,
    ),
  ],
),
Enter fullscreen mode Exit fullscreen mode

Flat Button


FlatButton(
  onPressed: () {
    debugPrint('I am Awesome');
  },
  textColor: Colors.white,
  color: Colors.blueAccent,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.white,
  highlightColor: Colors.orangeAccent,
  child: Text('Flat Button'),
),
Enter fullscreen mode Exit fullscreen mode

Raised Button


RaisedButton(
  onPressed: () {
    debugPrint('I am Awesome');
  },
  textColor: Colors.white,
  color: Colors.blueAccent,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.white,
  highlightColor: Colors.orangeAccent,
  elevation: 4.0,
  child: Text('Raised Button'),
),
Enter fullscreen mode Exit fullscreen mode

Icon Button


IconButton(
  onPressed: () {
    debugPrint("Starred Me!");
  },
  color: Colors.orangeAccent,
  icon: Icon(Icons.star),
  disabledColor: Colors.grey,
  highlightColor: Colors.black38,
),
Enter fullscreen mode Exit fullscreen mode

Floating Action Button


FAB (Default)


FAB (Mini)

return Scaffold(
  floatingActionButton: new FloatingActionButton(
    mini: true,
    child: new Icon(Icons.add),
    onPressed: () {},
  ),
);
Enter fullscreen mode Exit fullscreen mode

TextField

Under Line Style


TextField(
  decoration: InputDecoration(
  hintText: "Enter your name!",
  hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
  enabledBorder: new UnderlineInputBorder(
      borderSide: new BorderSide(color: Colors.blue)),
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.orange),
  ),
  ),
)
Enter fullscreen mode Exit fullscreen mode

Outer Line Style


TextField(
  decoration: InputDecoration(
  hintText: "Enter your name!",
  hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
  enabledBorder: new OutlineInputBorder(
      borderSide: new BorderSide(color: Colors.blue)),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.orange),
  ),
  ),
)
Enter fullscreen mode Exit fullscreen mode

More collection of widgets can be found here

profile
AWS
 Promoted

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

profile
TigerData (Creators of TimescaleDB)
 Promoted

Tiger Data image

🐯 🚀 Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

We’ve quietly evolved from a time-series database into the modern PostgreSQL for today’s and tomorrow’s computing, built for performance, scale, and the agentic future.

So we’re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who we’ve become. TigerData is bold, fast, and built to power the next era of software.

Read more