Getting Started With Flutter

Well I started the challenge #30DaysOfFlutter from google. And today is the first day where I learned about the basics of dart and flutter. Without blabbering bullshit things I will directly go into the things I learned today.

Credit : flutter.dev

Dart

Dart is client optimized programming language developed by google for multiplatform application development. It is so easy to catchup and in no time you will start building your application. I am just loving the simplicity of Dart :)
Official Page: https://dart.dev/
Playground for Dart: https://dartpad.dev/

Flutter

Flutter is user interface toolkit to develop android, ios, web and desktop application. It means one code run everywhere. Just Wow!
Dart is the main backbone for flutter. You can build beautiful ui though flutter which is based on the concept of Widget.
Official Page: https://flutter.dev/

Widget
Widgets are the main ingredients of Flutter. Everything you see in flutter application are widget. For example text, listview, gridview and many more. You are going to come across a lot of widget while building application.

Now we are good to build some application. Lets jump into some flutter coding.

Application: Infinite Scrolling List View with Interactivity
So basically the app we are developing will have infinite scroll view with some interactivity.

For scrolling simple put all your children ListTile into ListView

ListView(
  children: [
        ListTile(),
        ListTile(),
  ]
)

You can also use ListView.builder to build the listview when you have more item to show. It will lazily load the item as you keep scrolling and destroy the earliers item.

Inside the ListView you can add ListTile as children which will contain the specific contents of list item.

ListTile(
  title: Text(
      "list tile text",
       style: TextStyle(...),
  ),
)

To add the interactivity you can call onTap on each list item i.e. ListTile.

onTap: (){
 // your actions on tap goes here
},

Here in this application I have used external package called English Word generator:

english_words: ^3.1.5

The full code for main.dart is as follows:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {



    return MaterialApp(
      title: 'Startup Name Generator',
      theme: ThemeData(
        primaryColor: Colors.white
      ),
      home: RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  _RandomWordsState createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {

  final List<WordPair> _suggestions = <WordPair>[];            // NEW
  final TextStyle _biggerFont = const TextStyle(fontSize: 18);
  final _saved = Set<WordPair>();

  Widget _buildSuggestions(){
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemBuilder: (BuildContext _context, int i){
        if(i.isOdd){
         return Divider();
        }

        final int index = i~/2;


        if(index>= _suggestions.length){
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );

  }

  Widget _buildRow(WordPair suggestion) {
    final alreadySaved = _saved.contains(suggestion);
    return ListTile(
      title: Text(
          suggestion.asPascalCase,
          style: _biggerFont,

      ),
      trailing: Icon(
        alreadySaved?Icons.favorite:Icons.favorite_border,
        color: alreadySaved?Colors.red:null,
      ),
      onTap: (){
        setState(() {
          if(alreadySaved){
            _saved.remove(suggestion);
          }else{
            _saved.add(suggestion);
          }
        });
      },
    );
  }
  void _onPushed(){
    Navigator.of(context).push(
      MaterialPageRoute<void>(
          builder: (BuildContext _context){
            final tiles = _saved.map((WordPair pair) {
              return ListTile(
                title: Text(
                    pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            });

            final divided = ListTile.divideTiles(
              context: _context,
              tiles: tiles,
            ).toList();
            return Scaffold(
              appBar: AppBar(
                title: Text('Saved Suggestion'),

              ),
              body: ListView(children: divided),
            );

          }
      )


    );
  }

  @override
  Widget build(BuildContext context) {
   // final wordPair = WordPair.random();

    return  Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
        actions: [
          IconButton(icon: Icon(Icons.list), onPressed: _onPushed)
        ],

      ),
      body: _buildSuggestions(),
    );
  }


}

Find the full application code in github . Tested in Android.
Thanks for reading.

#Happyfluttering #30DaysOfFlutter #flutter #ListView #ListTile

Refrence:
https://flutter.dev/
https://dart.dev/
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2