DEV Community

Cover image for Flutter & Dart Tips - Week In Review
Offline Programmer
Offline Programmer

Posted on

Flutter & Dart Tips - Week In Review

#dart #flutter #beginners #codenewbie

Hello Reader,

Welcome to the 2nd post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.

1- You can use the services library to hide the status bar.


    import 'package:flutter/services.dart';

    void main() {
        SystemChrome.setEnabledSystemUIOverlays([]);
    }
Enter fullscreen mode Exit fullscreen mode

2- The http package contains a set of functions and classes to consume HTTP resources. The example below use the http package to make http request


    import 'package:http/http.dart' as http;

    http.get(some_api_url).then((http.Response res) {
        final data = json.decode(res.body);
        print(data);
    });
Enter fullscreen mode Exit fullscreen mode

3- You can use the FadeInImage widget & transparent_image package to display a transparent placeholder waiting for the image to fade in as it gets loaded.


    import 'package:transparent_image/transparent_image.dart';

    ...

    FadeInImage.memoryNetwork(
        placeholder: kTransparentImage, 
        image: someImageUrl,
        fit: BoxFit.fill,
    ),
Enter fullscreen mode Exit fullscreen mode

4- To add icons to TextFields use "icon", "prefixIcon" and "suffixIcon" from InputDecoration


    TextField(
    decoration: InputDecoration(
        icon: Icon(Icons.email)
        ),
    ),

    ...

    TextField(
    decoration: InputDecoration(
        prefixIcon: Icon(Icons.email)
        ),
    ),

    ...


    TextField(
    decoration: InputDecoration(
        suffixIcon: Icon(Icons.email)
        ),
    ),
Enter fullscreen mode Exit fullscreen mode

5- The cursor of TextField is Customizable. The example below will set the purple.


    TextField(
        cursorColor: Colors.purple,
        cursorRadius: Radius.circular(8.0),
        cursorWidth: 8.0,
    ),
Enter fullscreen mode Exit fullscreen mode

6- To pack the children of a Row close together, set its mainAxisSize to MainAxisSize.min


    Row(
        mainAxisSize: MainAxisSize.min,
        children: [
            Icon(Icons.star, color: Colors.orange[500]),
            Icon(Icons.star, color: Colors.orange[500]),
            Icon(Icons.star, color: Colors.orange[500]),
            Icon(Icons.star, color: Colors.black),
            Icon(Icons.star, color: Colors.black),
        ],
    ),
Enter fullscreen mode Exit fullscreen mode

See you next week. 👋🏻

Follow me on Twitter for more tips about #coding, #learning, #technology...etc.

Check my Apps on Google Play

Cover image Markus Spiske on Unsplash

Top comments (3)

Collapse
 
pablonax profile image
Pavel Kalo •

Good job! If you are interested in Flutter, you can also look at my article about free vs paid Flutter templates. I'm sure you'll find something useful there, too.  - dev.to/pablonax/free-vs-paid-flutt...

Collapse
 
offlineprogrammer profile image
Offline Programmer •

I acually saw that yesterday ... Good stuff

Collapse
 
pablonax profile image
Pavel Kalo •

I am glad that my article was useful for you! Thanks!