diff --git a/examples/codelabs b/examples/codelabs index cfdedfb1cb..b100728476 160000 --- a/examples/codelabs +++ b/examples/codelabs @@ -1 +1 @@ -Subproject commit cfdedfb1cb00fc0cc2a97d42899653b2a9c08dd6 +Subproject commit b100728476af3ce59fcba53ebebff24d08e366a1 diff --git a/site-shared b/site-shared index 142de13347..f3fd1c5de3 160000 --- a/site-shared +++ b/site-shared @@ -1 +1 @@ -Subproject commit 142de133477bdede1746f992e656c4b43c4c7442 +Subproject commit f3fd1c5de3eb8fdfc1aefdc8032e4c78757f0b0f diff --git a/src/get-started/codelab.md b/src/get-started/codelab.md index 7b909efd0a..9ac5e32f69 100644 --- a/src/get-started/codelab.md +++ b/src/get-started/codelab.md @@ -498,14 +498,14 @@ lazily, on demand. ```dart class _RandomWordsState extends State { [!final _suggestions = [];!] - [!final _biggerFont = const TextStyle(fontSize: 18.0);!] + [!final _biggerFont = const TextStyle(fontSize: 18);!] // ยทยทยท } ``` - Next, you'll add a `ListView.builder` widget to the - `_RandomWordsState` class. This method builds the - `ListView` that displays the suggested word pairing. + Next, you'll add a `ListView` widget to the + `_RandomWordsState` class with the `ListView.builder` constructor. + This method creates the `ListView` that displays the suggested word pairing. The `ListView` class provides a builder property, `itemBuilder`, that's a factory builder and callback function specified as an @@ -517,11 +517,12 @@ lazily, on demand. This model allows the suggested list to continue growing as the user scrolls. - 2. Add a `ListView.builder` widget to the `build` method of the `_RandomWordsState` class: + 2. Return a `ListView` widget from the `build` method + of the `_RandomWordsState` class using the `ListView.builder` constructor: - + ```dart - body: ListView.builder( + return ListView.builder( padding: const EdgeInsets.all(16.0), itemBuilder: /*1*/ (context, i) { if (i.isOdd) return const Divider(); /*2*/ @@ -530,14 +531,8 @@ lazily, on demand. if (index >= _suggestions.length) { _suggestions.addAll(generateWordPairs().take(10)); /*4*/ } - return ListTile( - title: Text( - _suggestions[index].asPascalCase, - style: _biggerFont, - ), - ); + return Text(_suggestions[index].asPascalCase); }, - ), ``` {:.numbered-code-notes} @@ -554,11 +549,14 @@ lazily, on demand. 4. If you've reached the end of the available word pairings, then generate 10 more and add them to the suggestions list. - The `ListView.builder` widget creates a `ListTile` once per - word pair. This function displays each new pair in a `ListTile`, + The `ListView.builder` constructor creates and displays + a `Text` widget once per word pairing. + In the next step, you'll instead return each new pair as a `ListTile`, which allows you to make the rows more attractive in the next step. - 3. Add a `ListTile` in the `itemBuilder` body of the `ListView.builder` in `_RandomWordsState`: + 3. Replace the returned `Text` in the `itemBuilder` body + of the `ListView.builder` in `_RandomWordsState` + with a `ListTile` displaying the suggestion: ```dart @@ -569,101 +567,89 @@ lazily, on demand. ), ); ``` + + A `ListTile` is a fixed height row that contains text + as well as leading or trailing icons or other widgets. - 4. In the `_RandomWordsState` class, update the `build()` method to use - the `ListView.builder`, rather than directly calling the word - generation library. ([`Scaffold`][] - implements the basic Material Design visual layout.) - Replace the method body with the highlighted code: + 4. Once complete, the `build()` method in the `_RandomWordsState` class + should match the following highlighted code: ```dart @override Widget build(BuildContext context) { - [!return Scaffold(!] - [! appBar: AppBar(!] - [! title: const Text('Startup Name Generator'),!] - [! ),!] - [! body: ListView.builder(!] - [! padding: const EdgeInsets.all(16.0),!] - [! itemBuilder: /*1*/ (context, i) {!] - [! if (i.isOdd) return const Divider(); /*2*/!] - - [! final index = i ~/ 2; /*3*/!] - [! if (index >= _suggestions.length) {!] - [! _suggestions.addAll(generateWordPairs().take(10)); /*4*/!] - [! }!] - [! return ListTile(!] - [! title: Text(!] - [! _suggestions[index].asPascalCase,!] - [! style: _biggerFont,!] - [! ),!] - [! );!] - [! },!] - [! ),!] + [!return ListView.builder(!] + [! padding: const EdgeInsets.all(16.0),!] + [! itemBuilder: /*1*/ (context, i) {!] + [! if (i.isOdd) return const Divider(); /*2*/!] + + [! final index = i ~/ 2; /*3*/!] + [! if (index >= _suggestions.length) {!] + [! _suggestions.addAll(generateWordPairs().take(10)); /*4*/!] + [! }!] + [! return ListTile(!] + [! title: Text(!] + [! _suggestions[index].asPascalCase,!] + [! style: _biggerFont,!] + [! ),!] + [! );!] + [! },!] [!);!] } ``` - 5. In the `MyApp` class, update the `build()` method by changing the title, - and changing the home to be a `RandomWords` widget: + 5. To put it all together, update the displayed title of the app + by updating the `build()` method in the `MyApp` class + and changing the title of the `AppBar`: ```diff --- step3_stateful_widget/lib/main.dart +++ step4_infinite_list/lib/main.dart - @@ -13,27 +13,43 @@ - const MyApp({Key? key}) : super(key: key); + @@ -14,12 +14,12 @@ @override Widget build(BuildContext context) { - - return MaterialApp( + return MaterialApp( - title: 'Welcome to Flutter', - - home: Scaffold( - - appBar: AppBar( - - title: const Text('Welcome to Flutter'), - - ), - - body: const Center( - - child: RandomWords(), - - ), - - ), - + return const MaterialApp( + title: 'Startup Name Generator', - + home: RandomWords(), - ); + home: Scaffold( + appBar: AppBar( + - title: const Text('Welcome to Flutter'), + + title: const Text('Startup Name Generator'), + ), + body: const Center( + child: RandomWords(), + ), + @@ -28,12 +28,30 @@ } } class _RandomWordsState extends State { + final _suggestions = []; - + final _biggerFont = const TextStyle(fontSize: 18.0); + + final _biggerFont = const TextStyle(fontSize: 18); + @override Widget build(BuildContext context) { - final wordPair = WordPair.random(); - return Text(wordPair.asPascalCase); - + return Scaffold( - + appBar: AppBar( - + title: const Text('Startup Name Generator'), - + ), - + body: ListView.builder( - + padding: const EdgeInsets.all(16.0), - + itemBuilder: /*1*/ (context, i) { - + if (i.isOdd) return const Divider(); /*2*/ + + return ListView.builder( + + padding: const EdgeInsets.all(16.0), + + itemBuilder: /*1*/ (context, i) { + + if (i.isOdd) return const Divider(); /*2*/ + - + final index = i ~/ 2; /*3*/ - + if (index >= _suggestions.length) { - + _suggestions.addAll(generateWordPairs().take(10)); /*4*/ - + } - + return ListTile( - + title: Text( - + _suggestions[index].asPascalCase, - + style: _biggerFont, - + ), - + ); - + }, - + ), + + final index = i ~/ 2; /*3*/ + + if (index >= _suggestions.length) { + + _suggestions.addAll(generateWordPairs().take(10)); /*4*/ + + } + + return ListTile( + + title: Text( + + _suggestions[index].asPascalCase, + + style: _biggerFont, + + ), + + ); + + }, + ); } }