black screen with Dismissible - Flutter

MohammedHamdan
January 31, 2023
138 views
3 votes
4 Answers

i am trying to call Navigator.pop(context); from Dismissible like following

 @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: const Key('some key here'),
      direction: DismissDirection.down,
      onDismissed: (l) {
        Navigator.pop(context);
      },

      child: const Scaffold(
        backgroundColor: Colors.yellowAccent,
      ),
      
    );
  }
}

it is work fine but the problem is once i swipe i see black screen !

how could i make it transparent so i can see the previous page instead of black screen ..

if it is not possible with Dismissible please suggest to me any other way to make it done

import 'package:flutter/material.dart';

class myFirstPag extends StatefulWidget {
  const myFirstPag({Key? key}) : super(key: key);
  @override
  myFirstPagState createState() => myFirstPagState();
}

class myFirstPagState extends State<myFirstPag> {



  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.of(context).push(MaterialPageRoute(builder: (context) {
          return mySecPag();
        }
        )
        );
      },
      child: const Scaffold(
        backgroundColor: Colors.red,
        body: Center(child: Text('my First Page')
        ),

      ),
    );
  }
}





class mySecPag extends StatefulWidget {
  const mySecPag({Key? key}) : super(key: key);
  @override
  mySecPagState createState() => mySecPagState();
}

class mySecPagState extends State<mySecPag> {



  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: const Key('some key here'),
      direction: DismissDirection.down,
      onDismissed: (l) {
        Navigator.pop(context);
      },

      child: const Scaffold(
        backgroundColor: Colors.yellowAccent,
        body: Center(child: Text('my sec page'),),
      ),

    );
  }
}

Tags: flutter

Answers

Chosen as BEST ANSWER

i found solution finally ..

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            showGeneralDialog(
              barrierLabel: "Label",
              barrierDismissible: false,
              barrierColor: Colors.black.withOpacity(0.5),
              transitionDuration: Duration(milliseconds: 400),
              context: context,
              pageBuilder: (context, anim1, anim2) {
                return SecondRoute();
              },
              transitionBuilder: (context, anim1, anim2, child) {
                return SlideTransition(
                  position: Tween(begin: Offset(0, 1), end: Offset(0, 0))
                      .animate(anim1),
                  child: child,
                );
              },
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dismissible(
      direction: DismissDirection.vertical,
      key: const Key('key'),
      onDismissed: (_) => Navigator.of(context).pop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Second Route"),
        ),
        body: Align(
          alignment: Alignment.center,
          child: Container(
            height: 300,
            width: 300,
            child: SizedBox.expand(child: FlutterLogo()),
            margin: EdgeInsets.only(bottom: 50, left: 12, right: 12),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(40),
            ),
          ),
        ),
      ),
    );
  }
}

(Edit)

Try This Code:

it is work fine!

 import 'package:flutter/material.dart';
    
    class mySecPag extends StatefulWidget {
      const mySecPag({Key? key}) : super(key: key);
      @override
      mySecPagState createState() => mySecPagState();
    }
    
    class mySecPagState extends State<mySecPag> {
    
    
    
      @override
      Widget build(BuildContext context) {
        return Dismissible(
          background: Container(
            color: Colors.red,
          ),
          key: const Key('some key here'),
          direction: DismissDirection.down,
          onDismissed: (l) {
    
          },
    
          child: const Scaffold(
            backgroundColor: Colors.yellowAccent,
            body: Center(child: Text('my Contents'),),
          ),
    
        );
      }
    }

I don’t think you will able to achive it by Dismissible widget:

I have modified your code slightly to this:

import 'package:flutter/material.dart';

class myFirstPag extends StatefulWidget {
  const myFirstPag({Key? key}) : super(key: key);
  @override
  myFirstPagState createState() => myFirstPagState();
}

class myFirstPagState extends State<myFirstPag> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) {
          return mySecPag();
        }));
      },
      child: const Scaffold(
        backgroundColor: Colors.red,
        body: Center(child: Text('my First Page')),
      ),
    );
  }
}

class mySecPag extends StatefulWidget {
  const mySecPag({Key? key}) : super(key: key);
  @override
  mySecPagState createState() => mySecPagState();
}

class mySecPagState extends State<mySecPag> {
  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: const Key('some key here'),
      direction: DismissDirection.down,
      background: Container(color: Colors.red),
      onDismissed: (l) {
        Navigator.pop(context);
      },
      child: const Scaffold(
        backgroundColor: Colors.yellowAccent,
        body: Center(
          child: Text('my sec page'),
        ),
      ),
    );
  }
}

I have added background property in Dismisible Widget, now whenever you swipe you can see that color will be shown.

But the style you want to achieve, you can do it with CupertinoRoutes.

Example of your code using CupertinoRoutes routes:

class myFirstPag extends StatefulWidget {
  const myFirstPag({Key? key}) : super(key: key);
  @override
  myFirstPagState createState() => myFirstPagState();
}

class myFirstPagState extends State<myFirstPag> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(mySecPag.route());
      },
      child: const Scaffold(
        backgroundColor: Colors.red,
        body: Center(child: Text('my First Page')),
      ),
    );
  }
}

class mySecPag extends StatefulWidget {
  const mySecPag({Key? key}) : super(key: key);
  static Route<dynamic> route() {
    return CupertinoPageRoute(
      builder: (BuildContext context) {
        return mySecPag();
      },
    );
  }

  @override
  mySecPagState createState() => mySecPagState();
}

class mySecPagState extends State<mySecPag> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.yellowAccent,
      body: Center(
        child: Text('my sec page'),
      ),
    );
  }
}

Here’s the full tutorial for it: Link

You can try this code:

First screen

import 'package:flutter/material.dart';
import 'package:surplus_construction/screens/trash/trash_file.dart';

class NewTrash extends StatefulWidget {
  const NewTrash({super.key});

  @override
  State<NewTrash> createState() => _TrashViewState();
}

class _TrashViewState extends State<NewTrash> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.yellowAccent,
        body: Center(
          child: InkWell(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => TrashView()),
                );
              },
              child: Text('Press me')),
        ),
      ),
    );
  }
}

Second screen:

import 'package:flutter/material.dart';

class TrashView extends StatefulWidget {
  const TrashView({super.key});

  @override
  State<TrashView> createState() => _TrashViewState();
}

class _TrashViewState extends State<TrashView> {
  @override
  Widget build(BuildContext context) {
    return Dismissible(
      background: Container(
        color: Colors.grey,
      ),
      key: const Key('some key here'),
      direction: DismissDirection.down,
      onDismissed: (l) {
        Navigator.pop(context);
      },
      child: const Scaffold(
        backgroundColor: Colors.red,
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

black screen with Dismissible – Flutter

Answers