Exception has occurred. FlutterError (No Scaffold widget found. MyHomePage widgets require a Scaffold widget ancestor. The specific widget that could not find a Scaffold ancestor was: MyHomePage The ancestors of this widget were: Semantics Builder RepaintBoundary-[GlobalKey#5c844] IgnorePointer AnimatedBuilder FadeTransition FractionalTranslation SlideTransition _FadeUpwardsPageTransition AnimatedBuilder RepaintBoundary FocusTrap _FocusMarker Semantics FocusScope PrimaryScrollController _ActionsMarker Actions Builder PageStorage Offstage _ModalScopeStatus UnmanagedRestorationScope RestorationScope AnimatedBuilder _ModalScope-[LabeledGlobalKey<_ModalScopeState>#c4e87] Semantics _EffectiveTickerMode TickerMode _OverlayEntryWidget-[LabeledGlobalKey<_OverlayEntryWidgetState>#becc1] _Theatre Overlay-[LabeledGlobalKey#3a815] UnmanagedRestorationScope _FocusMarker Semantics FocusScope AbsorbPointer Listener HeroControllerScope Navigator-[GlobalObjectKey _WidgetsAppState#0ccea] IconTheme IconTheme _InheritedCupertinoTheme CupertinoTheme _InheritedTheme Theme AnimatedTheme _ScaffoldMessengerScope ScaffoldMessenger Builder DefaultTextStyle CustomPaint Banner CheckedModeBanner Title Directionality _LocalizationsScope-[GlobalKey#ed058] Semantics Localizations MediaQuery _MediaQueryFromWindow _FocusMarker Focus _FocusTraversalGroupMarker FocusTraversalGroup _ActionsMarker DefaultTextEditingActions _ActionsMarker Actions _ShortcutsMarker Semantics _FocusMarker Focus DefaultTextEditingShortcuts _ShortcutsMarker Semantics _FocusMarker Focus Shortcuts UnmanagedRestorationScope RestorationScope UnmanagedRestorationScope RootRestorationScope WidgetsApp-[GlobalObjectKey _MaterialAppState#d0f4a] Semantics _FocusMarker Focus HeroControllerScope ScrollConfiguration MaterialApp MyApp [root] Typically, the Scaffold widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.) getting this exception when I click my app FlotaingButton or AppButton.

import 'package:flutter/material.dart';

import './widgets/new_transaction.dart';
import './widgets/transaction_list.dart';
import './models/transaction.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Transaction> _userTransactions = [
    Transaction(
      id: 't1',
      title: 'New Shoes',
      amount: 60.32,
      date: DateTime.now(),
    ),
    Transaction(
      id: 't2',
      title: ' Weekly Groceriese',
      amount: 10.22,
      date: DateTime.now(),
    ),
  ];

  void _addNewTransaction(String txTitle, double txAmount) {
    final newTx = Transaction(
      title: txTitle,
      amount: txAmount,
      date: DateTime.now(),
      id: DateTime.now().toString(),
    );
    setState(() {
      _userTransactions.add(newTx);
    });
  }

  void _startNewTransaction(BuildContext ctx) {
    showBottomSheet(
        context: ctx,
        builder: (_) {
          return GestureDetector(
            onTap: () {},
            child: NewTransaction(_addNewTransaction),
            behavior: HitTestBehavior.opaque,
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
        actions: <Widget>[
          IconButton(
            onPressed:  () =>  _startNewTransaction(context),
            icon: Icon(Icons.add),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Container(
              width: double.infinity,
              child: Card(
                color: Colors.blue,
                elevation: 5,
                child: Text('Chart !'),
              ),
            ),
            TransactionList(_userTransactions),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () => _startNewTransaction(context),
        child: Icon(Icons.add),
      ),
    );
  }
}

I also tried this way by using Scaffold.of(ctx).showBottomSheet but its giving me some error which I don't understand

CodePudding user response：

Try: showModalBottomSheet instead.

Or if You wish to use showBottomSheet then this is a workaround.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      home: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _startNewTransaction(BuildContext ctx) {
    showBottomSheet(
      context: ctx,
      builder: (_) {
        return GestureDetector(
          onTap: () {},
          child: Container(),
          behavior: HitTestBehavior.opaque,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
        actions: <Widget>[
          IconButton(
            onPressed: () => _startNewTransaction(context),
            icon: Icon(Icons.add),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Container(
              width: double.infinity,
              child: Card(
                color: Colors.blue,
                elevation: 5,
                child: Text('Chart !'),
              ),
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () => _startNewTransaction(context),
        child: Icon(Icons.add),
      ),
    );
  }
}