Flutter Struktur?

Hallo, ich habe eine Frage!

Und zwar bin ich noch absoluter ANfänger was Flutter betrifft. Ich möchte eine App entwickeln. Diese soll ein Sidebar und ein BottomNavigation Menü haben. EIn Item der BottomNavigationBar soll gleichzeitig die Startseite sein, wenn die App geöffnet wird. Wie mache ich das?

Was muss ich in main.dart reinschreiben?

Kann mir jemand die Struktur erklären ?

Answer 1

[Bizco]

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0; // Index des aktuellen BottomNavigationBar-Elements

  final List<Widget> _pages = [    HomePage(), // Startseite    SettingsPage(),    AboutPage(),  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text('Home'),
              onTap: () {
                Navigator.of(context).pop();
                setState(() {
                  _selectedIndex = 0;
                });
              },
            ),
            ListTile(
              title: Text('Settings'),
              onTap: () {
                Navigator.of(context).pop();
                setState(() {
                  _selectedIndex = 1;
                });
              },
            ),
            ListTile(
              title: Text('About'),
              onTap: () {
                Navigator.of(context).pop();
                setState(() {
                  _selectedIndex = 2;
                });
              },
            ),
          ],
        ),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info),
            title: Text('About'),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return

Comments

[linuxlara]

Ich hab noch einne Frage, ich will quasi ganz oben ein bild und unterhalb eine ListView, aber mit Column geht das nicht. Mein Versuche:

      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              Image.asset('assets/images/img.jpg',),
            ],
          ),
          ListView(
            children: [
              ListTile(title: Text("A"),),
              ListTile(title: Text("A"),),
              ListTile(title: Text("A"),),
              ListTile(title: Text("A"),),
            ],
          ),



        ],
      ),

Was ist mein Fehler, es wird nur das Bild angezeigt aber die ListView nicht

[Bizco]

@linuxlara

Es gibt einige mögliche Gründe, warum in Deinem Code nur das Bild angezeigt wird, aber nicht die ListView. Einer davon könnte sein, dass die ListView nicht genügend Platz hat, um sich vollständig auszubreiten. Dies könnte passieren, wenn die ListView in einem Container platziert ist, der zu klein ist, um alle Elemente der ListView anzuzeigen.

Um dies zu beheben, könntest Du zum Beispiel die Größe des Containers, in dem die ListView platziert ist, erhöhen oder die Größe der ListView selbst anpassen, indem Du die Eigenschaft

shrinkWrap

auf

true

setzt. Dies würde die ListView automatisch an die Größe der enthaltenen Elemente anpassen.

Ein anderer Grund könnte sein, dass die ListView nicht sichtbar ist, weil sie von einem anderen Widget verdeckt wird. Stelle sicher, dass keine anderen Widgets vor der ListView platziert sind und dass sie genügend Platz hat, um sich vollständig auszubreiten.

Es gibt noch einige weitere mögliche Gründe, warum die ListView nicht angezeigt wird. Um das Problem genauer zu diagnostizieren, könntest Du versuchen, den Code zu debuggen und Dir das Layout der Widgets anzusehen, indem Du das Flutter-Debugging-Werkzeug verwendest.

 body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Row(
      children: [
        Image.asset('assets/images/img.jpg'),
      ],
    ),
    Expanded(
      child: ListView(
        children: [
          ListTile(title: Text("A")),
          ListTile(title: Text("A")),
          ListTile(title: Text("A")),
          ListTile(title: Text("A")),
        ],
      ),
    ),
  ],
),

Ich habe die ListView in ein

Expanded

-Widget eingebettet, um sicherzustellen, dass sie genügend Platz hat, um sich vollständig auszubreiten. Auf diese Weise wird sie alle verfügbaren Räume in der Spalte füllen und sollte daher sichtbar sein.

Es ist wichtig zu beachten, dass es möglicherweise immer noch andere Faktoren gibt, die dazu beitragen könnten, dass die ListView nicht angezeigt wird. Um das Problem genauer zu diagnostizieren, könntest Du versuchen, den Code zu debuggen und Dir das Layout der Widgets anzusehen, indem Du das Flutter-Debugging-Werkzeug verwendest.

Answer 2

[chris1977875]

Um eine App mit einer Sidebar und einem BottomNavigation Menü in Flutter zu erstellen, können Sie die Klassen

Drawer

und

BottomNavigationBar

verwenden.

Hier ist ein Beispiel für die Struktur, die Sie in Ihrer

main.dart

-Datei verwenden könnten:

Copy code
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyAppextends StatelessWidget { @override Widget build(BuildContext context) { returnMaterialApp( title: 'My App', home: MyHomePage(), ); } } class MyHomePage extendsStatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _selectedIndex = 0; final List<Widget> _children = [ HomePage(), OtherPage(), // Fügen Sie weitere Seiten hinzu, wenn Sie möchten ]; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My App'), ), drawer: Drawer( child: ListView( children: <Widget>[ // Fügen Sie Elemente für Ihre Sidebar hinzu ], ), ), body: _children[_selectedIndex],bottomNavigationBar: BottomNavigationBar( items: const <BottomNavigationBarItem>[BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('Home'), ),BottomNavigationBarItem( icon: Icon(Icons.mail), title: Text('Other'), ), // Fügen Sie weitere Elemente für die BottomNavigationBar hinzu ], currentIndex: _selectedIndex,onTap: _onItemTapped, ), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Home Page'), ); } } classOtherPage extends StatelessWidget { @override Widget build(BuildContext context) { returnCenter( child: Text('Other Page'), ); } }

In diesem Beispiel wird eine Klasse

MyHomePage

verwendet, die das BottomNavigation Menü und die Sidebar enthält. Die Klasse verwendet einen

Drawer

und eine

BottomNavigationBar

, um die Seiten der App zu navigieren

Comments

[linuxlara]

Wenn ich jz aber mehrere Seiten habe und auf allen Seiten Sidebar und BottomNav angezeigt werden sollen, dann muss ich jeweils ein eigene Widget machen oder