Untitled

Main Widget

class MainPage extends StatefulWidget {

  • Widget: In Flutter, everything you see on the screen is a "widget" (like buttons, text, and layouts). widget is a special type of class that defines a part of the user interface (UI). Widgets are the building blocks of Flutter apps, and every visual element you see is made up of widgets.

  • StatefulWidget: A type of widget that can change its appearance while the app is running.

  • State: Information that can change, like which page you’re viewing.

@override
_MainPageState createState() => _MainPageState();

  • createState(): Links the widget (MainPage) with its state class (_MainPageState), where the logic and changes are handled.

State Class

class _MainPageState extends State<MainPage> {

  • State Class: This is where you manage what the widget shows and how it behaves when something changes, like tapping a button.

Variables in the State Class:
int _currentIndex = 0;

  • int: A type of variable for whole numbers (e.g., 0, 1, 2).

  • _currentIndex: Keeps track of the selected page. Starting at 0 means the first page is displayed when the app opens.

final List<Widget> _pages = [
  HomeScreen(),
  ProfileScreen(),
  SettingsScreen(),
];

  • List: A collection of items. Here, it holds different widgets (pages).

  • final: Means this list won’t change while the app runs, but its contents (like the pages) can update dynamically.

Building the User Interface

@override
Widget build(BuildContext context) {
  return Scaffold(

  • build: A function that tells Flutter how to display the widget. It is called whenever the state changes.

  • Scaffold: A layout structure that provides common app elements like an app bar, body (main content), and a navigation bar.

AppBar
appBar: AppBar(
  title: Text('Advanced App'),
  centerTitle: true,
),

  • AppBar: The top bar of the app. It contains the title "Advanced App".

  • centerTitle: Aligns the title in the center of the app bar.

Body
body: _pages[_currentIndex],

  • body: Displays the main content of the screen.

  • _pages[_currentIndex]: Shows the page from the _pages list based on the current index. For example:

    • _currentIndex = 0 → HomeScreen()

    • _currentIndex = 1 → ProfileScreen()

    • _currentIndex = 2 → SettingsScreen()

BottomNavigationBar
bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
),

  • BottomNavigationBar: A bar at the bottom with items for navigation.

  • currentIndex: Highlights the currently selected item based on _currentIndex.

  • onTap: A function triggered when a user taps an item. The index of the tapped item is passed, and setState updates _currentIndex to show the new page.

    • setState: Tells Flutter that something has changed, and the UI needs to update.

BottomNavigationBarItem

Each item in the navigation bar includes:

icon: Icon(Icons.home),
label: 'Home',

  • Icon: A small graphic, like a house (Icons.home).

  • label: Text shown below the icon, like "Home".

Adjusting for Flashcards

For a flashcard app, you could:

  1. Replace HomeScreen, ProfileScreen, and SettingsScreen with widgets like FlashcardList, AddFlashcard, and FlashcardSettings.

  2. Update the navigation bar icons and labels to match flashcard functionality.

Would you like me to show how to create one of these custom widgets or update this example for flashcards?