material-components / material-components-flutter-codelabs

Codelabs for Material Components for Flutter
212 stars 244 forks source link

MDC-101 Flutter: Material Components Basics >>> 5. Add buttons #293

Open UchqunovS opened 10 months ago

UchqunovS commented 10 months ago

In the codelab it is said 'After the text fields, add the OverflowBar to the ListView's children:' but the compiler is angry with this OverflowBar. maybe because of the latest updates

guidezpl commented 10 months ago

Can you share your version? I'm not having issues with flutter @ HEAD

FreekyFrank commented 5 months ago

I have what I think is the same problem. Just updated Flutter so convenient point to report. The issue appears to be the empty fields in the buttons. Copy of the class pasted at the end.

The current iteration also wants 'const' defined in different locations from colab text.

$ flutter run Connected devices: Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.4 LTS 5.15.0-102-generic Chrome (web) • chrome • web-javascript • Chromium 123.0.6312.105 snap

Please choose one (or "q" to quit): 1 Resolving dependencies... flutter_lints 1.0.4 (3.0.2 available) intl 0.17.0 (0.19.0 available) leak_tracker 10.0.0 (10.0.5 available) leak_tracker_flutter_testing 2.0.1 (3.0.5 available) leak_tracker_testing 2.0.1 (3.0.1 available) lints 1.0.1 (3.0.0 available) material_color_utilities 0.8.0 (0.11.1 available) meta 1.11.0 (1.14.0 available) test_api 0.6.1 (0.7.1 available) vm_service 13.0.0 (14.2.0 available) Got dependencies! 10 packages have newer versions incompatible with dependency constraints. Try flutter pub outdated for more information. Launching lib/main.dart on Linux in debug mode... ERROR: lib/login.dart:70:30: Error: Not a constant expression. ERROR: onPressed: () { ERROR: ^^ ERROR: lib/login.dart:78:30: Error: Not a constant expression. ERROR: onPressed: () { ERROR: ^^ ERROR: Target kernel_snapshot failed: Exception Building Linux application...
Error: Build process failed

CODE: class _LoginPageState extends State { // TODO: Add text editing controllers (101) @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: ListView( padding: const EdgeInsets.symmetric(horizontal: 24.0), children: [ const SizedBox(height: 80.0), Column( children: [ Image.asset('assets/diamond.png'), const SizedBox(height: 16.0), const Text('SHRINE'), ], ), const SizedBox(height: 120.0), // TODO: Remove filled: true values (103) // Done Add TextField widgets (101) // [Name] const TextField( decoration: InputDecoration( filled: true, labelText: 'Username', ), ), // spacer const SizedBox(height: 12.0), // password const TextField( decoration: InputDecoration( filled: true, labelText: 'Password', ), ), // done: Add button bar (101) const OverflowBar( alignment: MainAxisAlignment.end, // TODO: Add a beveled rectangular border to CANCEL (103) children: [ // TODO: Add Button (101) TextButton( child: Text('CANCEL'), onPressed: () { // TODO: Clear the text field (101) }, ), // TODO: Add an elevation to NEXT (101) // TODO: add a beveled rectangle border to NEXT (103) ElevatedButton( child: Text('NEXT'), onPressed: () { // TODO: Show the next Page (101) }, ), ], ) ], ), ), ); } }

Hope to see this resolved.

FreekyFrank commented 5 months ago

Solved! I'm new to Flutter and still having some difficulties. I am using VSCode and it often throws up warnings saying you need a 'const' which then causes problems later. It often suggests a 'const' before a widget while you are building the widget and if you follow this suggestion you end up locked with an error that is then not very easily understood from the hints given by the compiler errors. Hint: for those looking for the problem here remove the 'const' from in front of the Widgets that are throwing the errors! It might be helpful if these were suppressed until the all code compiles cleanly.