DEV Community

Shalini Kumari
Shalini Kumari

Posted on


Use flutter at its BEST!

Flutter can help you build your next big idea ๐Ÿ˜€ and it has a lot of widgets and libraries to facilitate the development. But you can use them only when you know about them ๐Ÿ˜Ž so do you know any of these that can help increase your productivity?

1.) Introduction Screen

Introduction screen allows you to have a screen at launcher for example, where you can explain your app. This Widget is very customizable with a great design.

Image description

  pages: listPagesViewModel,
  onDone: () {
    // When done button is press
  showBackButton: false,
  showSkipButton: true,
  skip: const Text("Skip"),
  done: const Text("Done", style: TextStyle(
            fontWeight: FontWeight.w600
Enter fullscreen mode Exit fullscreen mode

2.) RichText

The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree.

  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: const <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(
                  fontWeight: FontWeight.bold
      TextSpan(text: ' world!'),
Enter fullscreen mode Exit fullscreen mode

3.) CircleAvatar

Show the user avatar inside a circle in your user's profile ๐Ÿค—

Image description

  radius: 150,
  child: Image.asset("images/welcome.png"),
Enter fullscreen mode Exit fullscreen mode

4.) Splash Screen

Splash screens provide a simple initial experience while your mobile app loads.

Image description
Add this to your pubspec.yaml

  color: "#42a5f5"
  image: assets/splash.png
Enter fullscreen mode Exit fullscreen mode

Run this command in terminal

flutter pub run flutter_native_splash:create
Enter fullscreen mode Exit fullscreen mode

5.) Status Bar and Navigation Bar

Customize the status and navigation bar!!! Add your favourite colors ๐ŸŽจ

Image description

      statusBarColor: Colors.indigoAccent,
      systemNavigationBarColor: Colors.indigoAccent,
Enter fullscreen mode Exit fullscreen mode

6.) Cupertino Widgets

You can set the components according to the platform, if you want you screens to be more like iOS, you can use cupertino.

Image description

  ? CircularProgressIndicator()
  : CupertinoActivityIndicator()
Enter fullscreen mode Exit fullscreen mode

7.) Slider

A slider in Flutter is a material design widget used for selecting a range of values.

Image description

  value: currentValue,
  onChanged: (newValue) {
    setState( () {
      currentValue = newValue;
 min: 0,
 max: 100,
Enter fullscreen mode Exit fullscreen mode

8.) Chips

Chips are compact elements that represent an attribute, text, entity, or action.
Image description

 label: Text(languages(index)),
 onSelected: (bool value) {},
Enter fullscreen mode Exit fullscreen mode

9.) Use Google Fonts

Image description

  "Google Fonts",
  style: GoogleFonts.aguafinaScript().copyWith(fontSize: 60),
Enter fullscreen mode Exit fullscreen mode

10.) Curved Navigation Bar

Who wants a cool navigation bar ๐Ÿคฉ?

Image description

  backgroundColor: Colors.blueAccent,
  items: _icons,
  onTap: (index) {},
Enter fullscreen mode Exit fullscreen mode

โค โค Thank you for reading this article โคโค

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git