Flutter] Just Do it! (Basic Series 1-1 Infinite Scrolling ListView)

Development Environment

Os : Windows 10 (64-bit)

Android Studio Version : android-studio-ide-182.5314842-windows.exe

Flutter Version : flutter_windows_v1.2.1-stable

Device : Redmi Note 5 or Virtual Device

*If u didn't install Android Studio, plz Install : https://witch-dp.tistory.com/39

*If u didn't install Flutter , plz Install : https://witch-dp.tistory.com/40

*If u didn't connect Device, plz Connect : https://witch-dp.tistory.com/41

({doit1}/lib/main.dart)              ({doit1}/pubspec.yaml)

                  

Just Do it! Step

 1: Create the starter Flutter app

 2: Use an external package

 3: Add a Stateful widget

 4: Create an infinite scrolling ListView

1. Create Virtual Device

 -Change Code (main.dart)

 : class MyApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Just Do it! 1',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Just Do it! ft.witch-dp'),
        ),
        body: Center(
          child: Text('Just Do it! content'),
        ),
      ),
    );
  }
}

Result]

 -Flutter App Name = Flutter Project Name: doit1

 : class MyApp -> title: 'Just Do it! 1'

 : class MyApp -> home -> appBar -> title: 'Just Do it! ft.witch-dp '

 : class MyApp -> home -> body -> child: 'Just Do it! content'

2. Use an external package

 -Add Code (pubspec.yaml)

 : dependencies -> english_words: ^3.1.0

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

 -Click Get dependencies (main.dart)

Result]

 -Add Code (main.dart)

 : english_words => a few thousand of the most used English words plus some utility functions

import 'package:english_words/english_words.dart';

 -Add and Change Code (main.dart)

 : class MyApp -> wordPair

 : class MyApp -> home -> body -> child

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Just Do it! 1',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Just Do it! ft.witch-dp'),
        ),
        body: Center(
          //child: Text('Just Do it! content'),
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

Result]

 -content : CupCake (ft.asPascalCase => ex. Apple, AirPlane, ApplePie, etc)

 -content: CupCake ->GreekVoice (ft.WordPair of random() method)

3. Add a Stateful widget

 -Add Code (main.dart)

 : class RandomWordsState => use random() method and asPascalCase

 : class RandomWords => Create Object RandomWordsState class

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

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

 -Remove and Change Code (main.dart)

 : class MyApp -> wordPair

 : class MyApp -> home -> body -> child

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Just Do it! 1',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Just Do it! ft.witch-dp'),
        ),
        body: Center(
          //child: Text('Just Do it! content'),
          //child: Text(wordPair.asPascalCase),
          child: RandomWords(),
        ),
      ),
    );
  }
}

Result]

 -Start and Restart

 -content: BoothFund -> DearBike

4. Create an infinite scrolling ListView

 - Change Code (main.dart)

 : class RandomWordsState ->_suggestions => save to word at list

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  @override
  Widget build(BuildContext context) {
/*   final wordPair = WordPair.random();
   return Text(wordPair.asPascalCase);*/
    return Scaffold(
      appBar: AppBar(
        title: Text('Just Do it! ft.witch-dp'),
      ),
      body: _buildSuggestions(),
    );
  }
}

 -Add Code (main.dart)

 : Divider() =>Add a one-pixel-high divider(line)

 : index => calculates the actual number of word pairings in the ListView

 : length of List of words stored => _suggestions.length

Widget _buildSuggestions() {
  return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: /*1*/ (context, i) {
        if (i.isOdd) return Divider(); /*2*/

        final index = i ~/ 2; /*3*/
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10)); /*4*/
        }
        return _buildRow(_suggestions[index]);
      });
}

 -Add Code (main.dart)

 : class RandomWordsState -> _buildRow => content and font size at row

Widget _buildRow(WordPair pair) {
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
  );
}

 -Change Code (main.dart)

 : class MyApp -> home

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Just Do it! 1',
      home: RandomWords(),
      /*home: Scaffold(
        appBar: AppBar(
          title: Text('Just Do it! ft.witch-dp'),
        ),
        body: Center(
          //child: Text('Just Do it! content'),
          //child: Text(wordPair.asPascalCase),
          child: RandomWords(),
        ),
      ),*/
    );
  }
}

Result]

refer to Link :

https://flutter.dev/docs/get-started/codelab#what-youll-use