A couple tries with flutter today

Pulled up a tutorial and made a flutter app today. Took some time to get used to the "widget" style coding form used with dart. Will practice some more on it. Some sample code, which reminds me of CSS for some reason, of dart from earlier today :

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: Padding(
          padding:const EdgeInsets.symmetric(vertical: 30),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 30),
              child: Column(
                children: <Widget>[
                  Text('Measurement',style: TextStyle(
                    fontSize: 40, color:Colors.white, fontWeight: FontWeight.w700
                    ),),
                  Text('Converter',style: TextStyle(
                      fontSize: 40, color:Colors.white, fontWeight: FontWeight.w700
                  ),),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical:20, horizontal:40),
                    child: TextField(
                      onChanged: (text){
                        var input=double.tryParse(text);
                        if(input != null)
                          setState(() {
                            userInput = input;
                          });
                      },
                      style: TextStyle(
                        fontSize: 20, color: Colors.black
                      ),
                      decoration: InputDecoration(
                        filled: true,
                          fillColor: Colors.grey[300],
                          hintText: 'Enter Your Value',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20)
                          )),
                    ),
                  ),

The variable and method declarations are similar to what I'm used to with Swift, but these "widgets" will take some time to get familiar with. From what I've come across, the idea is that your app screen is a "canvas", so you can be more specific about what's displayed.

The app is a measurement converter, which worked pretty well. Customized it to what I wanted displayed.

A couple things to get more familiar with :

• Wrappers for items within widgets.
• The order in which widgets are built.
• How to further customize input within widgets.

Here's what it looks like so far :

I was thinking of doing it through Android Studio, but ended up doing it through IntelliJ, which took some calibrating on the SDK side. It finally went through after refreshing the Android SDK a couple time. Had to refresh the SDK in order for the Android emulator to load and display the flutter app after running it.

Although the "widget" style looks cumbersome, I like the idea of not having to code in two different pages like Android Studio : Java for functions and XML for layout. The added benefit being this can also create an iOS app. So while the "widget" approach may make the primary file look more bloated, there's only one to deal with.

Comments

[Keff]

Great stuff, glad the first impresion was positive!

So while the "widget" approach may make the primary file look more bloated, there's only one to deal with.

This is not necesarly the case, a good practice in flutter is that if one of your widgets feels bloated or is longer than you'd like, then it's probably a good idea to break down the widget into smaller ones. For example making a widget for the TextField, etc...

I'm doing a series here on DEV on flutter, if that's of interest to you 😀