Multiple ExpansionTile with multiple ListTile, how to do a second one - flutter

This question might sound dumb, but I am trying to make a list of Expandable list items which in turn have a list of items inside. I have come this far but I am unable to make it a show a second one WITHOUT USING INDEX.
import 'package:flutter/material.dart';
class ExerciseScreen extends StatefulWidget {
const ExerciseScreen({Key? key}) : super(key: key);
#override
State<ExerciseScreen> createState() => _ExerciseScreenState();
}
class _ExerciseScreenState extends State<ExerciseScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Table of Contents CEFR'),
),
body: ListView(
children: const [
ExpansionTile(
leading: Padding(
padding: EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundColor: Color.fromARGB(255, 0, 182, 91),
child: Text(
'A1',
style: TextStyle(fontSize: 15, color: Colors.white),
),
),
),
title: Text(
'To be: is, am, are',
style: TextStyle(fontSize: 21, color: Colors.black),
),
children: [
ListTile(
leading: CircleAvatar(
child: Text('A1'),
),
title: Text('Affirmative ideas'),
subtitle: Text('Singular and plural subjects'),
),
ListTile(
leading: CircleAvatar(
child: Text('A1'),
),
title: Text('Are: plural verb'),
subtitle: Text('Positive ideas using plural subjects'),
),
ListTile(
leading: CircleAvatar(
child: Text('A1'),
),
title: Text('Is : singular verb'),
subtitle: Text('Positive ideas using singular subjects'),
),
ListTile(
leading: CircleAvatar(
child: Text('A1'),
),
title: Text('Questions'),
subtitle: Text('Interrogative ideas - subject/verb/switch '),
),
ListTile(
leading: CircleAvatar(
child: Text('A1'),
),
title: Text('Questions'),
subtitle: Text('Closed questions (yes/no)'),
),
],
),
],
),
);
}
}

What is the problem with just adding a second ExpansionTile to your list? Like so:
import 'package:flutter/material.dart';
class ExerciseScreen extends StatefulWidget {
const ExerciseScreen({Key? key}) : super(key: key);
#override
State<ExerciseScreen> createState() => _ExerciseScreenState();
}
class _ExerciseScreenState extends State<ExerciseScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Table of Contents CEFR'),
),
body: ListView(
children: const [
ExpansionTile(...),
ExpansionTile(...),
],
),
);
}
}
On my side it shows both ExpansionTiles correctly:

Related

White Space in Drawer - Flutter

I'm using drawer widget...
But there's a white space in the container to the right side...
And here's my code...
home.dart
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Dashboard'),
elevation: 0,
backgroundColor: const Color.fromARGB(255, 10, 11, 102),
),
drawer: const CustomDrawer(),
body: Center(
child: Text('Home'),
),
);
}
}
custom_drawer.dart
class CustomDrawer extends StatelessWidget {
const CustomDrawer({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
Widget _drawerItems({String? text, IconData? icon, String? route}) {
return ListTile(
leading: icon == null ? null : Icon(icon),
title: Text(text!),
onTap: () {
Navigator.of(context)
.pushNamedAndRemoveUntil(route!, (route) => false);
},
);
}
return Drawer(
child: Column(
children: [
// Drawer Header
Container(
height: 150,
color: const Color.fromARGB(255, 10, 11, 102),
child: const Center(
child: Text(
'Welcome',
style: TextStyle(
color: Colors.white,
),
),
),
),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: [
// Home
_drawerItems(
text: 'Home',
icon: Icons.home_outlined,
route: homeScreenRoute,
),
ExpansionTile(
title: const Text('Products'),
leading: const Icon(Icons.production_quantity_limits),
children: [
// All Products
_drawerItems(
text: 'All Products',
route: productScreenRoute,
),
// Add Products
_drawerItems(
text: 'Add Products',
route: addProductScreenRoute,
),
],
),
],
),
),
],
),
);
}
}
How can I fix this?
It also sometimes blinking when I am dragging it to left or right...
I'm using my phone (Redmi Note 7) to debug.
So, is this a problem with that?
Or am I using drawer widget in the wrong way?
I've run your code and it works like a charm.
It works well on my phone too ( Redmi K30 4G ).
Here's what it looks like on my phone.
Also, your code is correct and I see nothing wrong with it. May be your phone has a problem.
Here's your output on emulator.
Can you release your app and test it on Redmi Note 7 to see if it's working?
For release mode, run flutter build apk and copy apk from $project_directory\build\app\outputs\app-release.apk.
Although it's working fine for me too, Just try adding this, maybe it can fix it!
Container(
width: double.maxFinite, // this line
height: 150,
color: const Color.fromARGB(255, 10, 11, 102),
child: const Center(
child: Text(
'Welcome',
style: TextStyle(
color: Colors.white,
),
),
),
),

Static image with scrollable text in flutter

import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
// adding App Bar
appBar: AppBar(
actions: [
SvgPicture.asset(
"assets/images/Moto.svg",
width: 50,
height: 100,
),
IconButton(
onPressed: () {},
icon: const Icon(Icons.cancel_outlined),
alignment: Alignment.topRight,
)
],
backgroundColor: Colors.white,
title: const Text(
"Version:1.38-alpha(10308)",
style: TextStyle(
color: Colors.white,
),
),
),
body: const MyApp(),
),
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: Container(
child: const Expanded(
// SingleChildScrollView contains a
// single child which is scrollable
child: SingleChildScrollView(
// for Vertical scrolling
scrollDirection: Axis.vertical,
child: Text(`
This is simple wrap your Expanded widget with stack and add the image widget as a first child to the stack.
Scaffold(
appBar: AppBar(
title: const Text('Sample UI'),
),
body: Stack(
children: [
SizedBox.expand(
child: Image.network(
'https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
fit: BoxFit.cover,
),
),
SingleChildScrollView(
child: Column(
children: List.generate(100,(index) =>
Text(
'Hello welcome $index',
style: const TextStyle(
fontSize: 20,
color: Colors.amberAccent,
fontWeight: FontWeight.bold,
),
)
),
),
)
],
),
)

How can i implement navigation drawer under appbar in flutter

I want to implement navigation drawer in flutter like this screenshot. But don't know how.
Please give me some code hint.
Thank you.
This is the image I like to archive
use the Drawer Widget in scaffold
this is an example from the official documentation
Scaffold(
appBar: AppBar(
title: const Text('Drawer Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: const <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Profile'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),
);
this is the result =>
You have to use the Drawer widget.
Scaffold(
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
ListTile(
title: const Text('Item 1'),
onTap: (){
// do something
},
),
ListTile(
title: const Text('Item 2'),
onTap: (){
// do something
},
),
],
),
),
...
And that's pretty much it! Learn more about Drawer, here.
An easy to archive this is using another Scaffold on body and using drawer there. And to control the drawer use ScaffoldState GlobalKey.
Result
Widget
class _MyApp extends StatefulWidget {
#override
State<_MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<_MyApp> {
static final GlobalKey<ScaffoldState> _key = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
if (_key.currentState != null) {
if (_key.currentState!.isDrawerOpen) {
Navigator.pop(_key.currentContext!);
} else {
_key.currentState!.openDrawer();
}
}
},
icon: const Icon(
Icons.more,
),
),
),
body: Scaffold(
key: _key,
drawer: Drawer(
child: Container(
color: Colors.red,
),
),
body: Column(
children: const [
Text("Child"),
],
),
));
}
}

how to make another AccountPicture in the left side of the drawer header

UserAccountsDrawerHeader(
accountName: Text("xxx"),
accountEmail: Text("flutterdev#gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('https://img.icons8.com/pastel-glyph/2x/user-male.png'),
backgroundColor: Colors.white,
),
decoration: BoxDecoration(
color: Colors.deepOrangeAccent
),
),
results
how do i add another account picture on the left side like this,
i've tried using the row column,but i think there is a more better way to do it.
thanks in advance.
You can copy paste run full code below
You can use otherAccountsPictures
otherAccountsPictures: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://img.icons8.com/pastel-glyph/2x/user-male.png'),
backgroundColor: Colors.white,
),
],
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text("xxx"),
accountEmail: Text("flutterdev#gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
'https://img.icons8.com/pastel-glyph/2x/user-male.png'),
backgroundColor: Colors.white,
),
decoration: BoxDecoration(color: Colors.deepOrangeAccent),
otherAccountsPictures: [
CircleAvatar(
backgroundImage: NetworkImage(
'https://img.icons8.com/pastel-glyph/2x/user-male.png'),
backgroundColor: Colors.white,
),
],
),
MediaQuery.removePadding(
context: context,
child: Expanded(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app.
// ...
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app.
// ...
},
),
],
),
),
),
],
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

SingleTickerProviderStateMixin and custom mixin

I'm a bit of a newb with Flutter and Dart, and Google couldn't help me with this question.
Say I have this:
class _MapPageState extends BaseState<MapPage> with SingleTickerProviderStateMixin
I want to add another mixin (BasePage) on top of this that contains a reusable appbar, drawer, etc. The layout is described in this article.
I know this is not possible, and my IDE throws an error that tells me to integrate them, but I do not know how. Is there a solution? I need SingleTickerProviderStateMixin because it is required by an AnimationController I am using.
Here is the custom mixin code, if needed:
abstract class Base extends StatefulWidget {
Base({Key key}) : super(key: key);
}
abstract class BaseState<Page extends Base> extends State<Page> {
String screenName();
}
mixin BasePage<Page extends Base> on BaseState<Page> {
MapFunctions functions = MapFunctions();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Guidey'),
backgroundColor: Colors.deepOrangeAccent,
centerTitle: true,
),
drawer: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.black.withOpacity(0.5)
),
child: Drawer(
child: ListView(
padding: EdgeInsets.fromLTRB(40.0, 10.0, 40.0, 10.0),
children: <Widget>[
DrawerHeader(
child: Padding(
padding: EdgeInsets.fromLTRB(0, 35, 0, 0),
child: Text('Navigation', textAlign: TextAlign.center, style: TextStyle(fontSize: 20, color: Colors.white))
)
),
ListTile(
title: Text('Profile', style: TextStyle(color: Colors.white)),
trailing: Icon(Icons.account_circle, color: Colors.white70),
onTap: (){
Navigator.of(context).pop();
},
),
ListTile(
title: Text('Map', style: TextStyle(color: Colors.white)),
trailing: Icon(Icons.drive_eta, color: Colors.white70),
onTap: (){
Navigator.of(context).pop();
},
),
ListTile(
title: Text('My Location', style: TextStyle(color: Colors.white)),
trailing: Icon(Icons.store, color: Colors.white70),
onTap: (){
},
)
],
)
),
),
);
}
Widget body();
}
It turns out I was thinking too big, combining mixins can be done with a simple comma.
... with SingleTickProviderMixin, BasePageMixin