Home > Software engineering >  Device Orientation Not Responding- Flutter
Device Orientation Not Responding- Flutter

Time:03-04

Hey there Stackverflow Geeks, I need help

I configured my App to show a switch button in landscape mode, but i cant figure out why it isnt working

The following condition should help to me to identify landscape and display a switch which has the function to display or not display a chart


if (isLandscape)
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Show Chart'),
                  Switch(
                    value: _showChart,
                    onChanged: (value) {
                      setState(() {
                        _showChart = value;
                      });
                    },
                  ),
                ],
              ),


Here is my full code

import 'package:expenses_app/widgets/chart.dart';
import 'package:expenses_app/widgets/transacion_list.dart';
import 'package:flutter/material.dart';
// import 'package:flutter/services.dart';
import './widgets/new_transaction.dart';
import './model/transaction.dart';

void main() {
  // ?force device to potrait mode
  // WidgetsFlutterBinding.ensureInitialized();
  // SystemChrome.setPreferredOrientations(
  //   [
  //     DeviceOrientation.portraitUp,
  //     DeviceOrientation.portraitDown,
  //   ],
  // );

  runApp(const ExpensesApp());
}

class ExpensesApp extends StatelessWidget {
  const ExpensesApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ' expenses application',
      theme: ThemeData(
        primarySwatch: Colors.green,
        fontFamily: 'Quicksand',
        textTheme: ThemeData.light().textTheme.copyWith(
              bodyText1: const TextStyle(
                fontFamily: 'OpenSans',
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
              button: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
        appBarTheme: AppBarTheme(
          toolbarTextStyle: ThemeData.light().textTheme.copyWith().bodyText2,
          titleTextStyle: ThemeData.light().textTheme.copyWith().headline6,
        ),
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final List<Transaction> _userTransactions = [
    // Transaction(
    //   id: 't1',
    //   title: 'shoes',
    //   amount: 345,
    //   date: DateTime.now(),
    // ),
    // Transaction(
    //   id: 't2',
    //   title: 'eggs',
    //   amount: 200,
    //   date: DateTime.now(),
    // ),
  ];

  bool _showChart = false;

  List<Transaction> get _recentTransactions {
    return _userTransactions.where(
      (element) {
        return element.date.isAfter(
          DateTime.now().subtract(
            const Duration(days: 7),
          ),
        );
      },
    ).toList();
  }

  void _addTransaction(String txtitle, double txamount, DateTime chosenDate) {
    final newTransaction = Transaction(
      title: txtitle,
      amount: txamount,
      date: chosenDate,
      id: DateTime.now().toString(),
    );
    setState(() {
      _userTransactions.add(newTransaction);
    });
  }

  void _startAddingNewTransaction(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (_) {
        return GestureDetector(
          onTap: (() {}),
          child: NewTransaction(
            addTransaction: _addTransaction,
          ),
          behavior: HitTestBehavior.opaque,
        );
      },
    );
  }

  void _deleteTransaction(String id) {
    setState(() {
      _userTransactions.removeWhere((element) => element.id == id);
    });
  }

  @override
  Widget build(BuildContext context) {
    // ignore: unrelated_type_equality_checks
    final isLandscape = MediaQuery.of(context).orientation == Orientation;

    final varAppbar = AppBar(
      title: const Text(
        'Expenses App',
        style: TextStyle(fontFamily: 'OpenSans'),
      ),
      actions: [
        IconButton(
          onPressed: () => _startAddingNewTransaction(context),
          icon: const Icon(
            Icons.add,
          ),
        )
      ],
    );

    final transactionListWidget = SizedBox(
      height: (MediaQuery.of(context).size.height - varAppbar.preferredSize.height - MediaQuery.of(context).padding.top) * 0.75,
      child: TransactionList(
        transactions: _userTransactions,
        deleteTransaction: _deleteTransaction,
      ),
    );

    return Scaffold(
      backgroundColor: Theme.of(context).primaryColorLight,
      appBar: varAppbar,
      body: SingleChildScrollView(
        child: Column(
          children: [
            if (isLandscape)
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Show Chart'),
                  Switch(
                    value: _showChart,
                    onChanged: (value) {
                      setState(() {
                        _showChart = value;
                      });
                    },
                  ),
                ],
              ),
            if (!isLandscape)
              SizedBox(
                height: (MediaQuery.of(context).size.height - varAppbar.preferredSize.height - MediaQuery.of(context).padding.top) * 0.25,
                child: Chart(recentTransactions: _recentTransactions),
              ),
            if (!isLandscape) transactionListWidget,
            if (isLandscape)
              _showChart
                  ? SizedBox(
                      height: (MediaQuery.of(context).size.height - varAppbar.preferredSize.height - MediaQuery.of(context).padding.top) * 1,
                      child: Chart(recentTransactions: _recentTransactions),
                    )
                  : transactionListWidget,
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        onPressed: () => _startAddingNewTransaction(context),
        child: const Icon(Icons.add),
      ),
    );
  }
}





CodePudding user response:

// ignore: unrelated_type_equality_checks
final isLandscape = MediaQuery.of(context).orientation == Orientation;

//change that to

final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
  • Related