Making software in 2022

📱 5 / 100 Days Of Flutter, Kate's edition — ListView, Padding and getting started with Dart

Kate's photo
Kate
📱 5 / 100 Days Of Flutter, Kate's edition — ListView, Padding and getting started with Dart

Hi, Hashnode community! 👋

It's day 5 of my Flutter challenge. I keep working on tasks in the free Udacity course and taking notes of my journey.

ListView for the Unit Converter app

ListView is a very important widget to master in Flutter. It has a lot of nuances that can only be learned by practice.

Today I was building a list of categories for the Unit Converter app. 

final listView = ListView.builder(
      itemCount: _categoryNames.length,
      itemBuilder: (context, index) {
        return Category(name: _categoryNames[index], color: _baseColors[index], icon: Icons.wine_bar);
      },
);

I decided to use the builder constructor because I already knew how to use it from my Pet Name Generator app (see day 2). That worked pretty well apart from the “swipe to refresh” colour.

While the entire app was in orange tones, the refresh indicator was blue.

day5.png

It turned out there is a RefreshIndicator widget that is magically enabled on my list. It has customisable color property but how to pass it if I don't explicitly render that widget?

image.png

The refresh colour is set to ColorScheme.primary by default. To change that colour I customised the app's ColorScheme:

return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.orange,
        )
      ),
      title: 'Unit Converter',
      home: const CategoryScreen(),
);

That did the trick! 🍊

Widget of the day - Padding

Padding is another simple yet important Flutter widget. To master Padding one really needs to master EdgeInsets.

const EdgeInsets.all(8.0)
// similar to the following CSS:
padding: 8px;

const EdgeInsets.symmetric(vertical: 8.0)
// similar to the following CSS:
padding: 8px 0;

const EdgeInsets.only(left: 40.0)
// similar to the following CSS:
padding-left: 40px;

Some of the widgets have their own padding property (ListView for instance) that accepts the same EdgeInsets type of values.

Summary

I'm slowly moving through the Udacity course and discovering small tricks like theme's colorScheme every day. When I'm not at my laptop I'm readying “Learning Dart as a JavaScript developer” as Dart is a must-have for any Flutter developer. More on this tomorrow.

Flutter100DaysOfCodelearning