Scaffold: vad är det, struktur och Flutter-widgets

Vad är Scaffold i Flutter

Scaffold — är en widget-kompositör från Material Design-biblioteket som formar den grundläggande visuella strukturen på skärmen. Den implementerar standardmönstret för Material-appar: övre panel, skärmkropp, sidomeny och flytande knappar. Till skillnad från Container, som bara ställer in storlek och stil, hanterar Scaffold hela skärmen som ett enhetligt system.

Varje Flutter-app byggd enligt Material Design börjar med MaterialApp, inom vilken varje skärm är inslagen i en Scaffold. Det är just Scaffold som säkerställer korrekt visning av AppBar på alla enheter, med hänsyn till SafeArea för iPhone X och nyare. Den ansvarar också för z-ordningen: Drawer visas ovanför body, och SnackBar — ovanför hela gränssnittet men under dialogrutor.

Enligt den officiella Flutter API Reference (2026) är Scaffold ett obligatoriskt villkor för korrekt funktion av widgets som SnackBar, BottomSheet och PersistentBottomSheet. Utan Scaffold kastar dessa komponenter ett undantag eftersom de är beroende av InheritedWidget Scaffold.of för åtkomst till Scaffold-kontexten. Därför är att placera innehåll direkt i Container istället för Scaffold ett vanligt misstag hos börjande utvecklare som leder till förlust av Material-funktionalitet.

Scaffold i widget-hierarkin

I en typisk Flutter-app finns Scaffold inuti MaterialApp, vanligtvis under WidgetsApp eller CupertinoApp vid cross-platform-utveckling. MaterialApp skapar Navigator och tema, och Scaffold bestämmer strukturen för den aktuella skärmen. Varje skärm kan ha sin egen Scaffold med unik AppBar, Drawer och BottomNavigationBar, vilket möjliggör flexibel anpassning av gränssnittet för en specifik sida.

För djupgående anpassning kan Scaffold kombineras med NestedScrollView — detta möjliggör implementering av komplexa rullningseffekter, till exempel en försvinnande AppBar med parallaxeffekt. Men i de flesta fall räcker standard Scaffold med dess egenskaper för att bygga en produktionsredo skärm.

Scaffold-struktur: viktiga delar av ramen

Scaffold består av flera obligatoriska och valfria zoner, var och en ansvarig för en specifik del av gränssnittet. Låt oss undersöka varje del separat för att förstå hur de samverkar.

AppBar — övre panel

AppBar — den övre panelen på skärmen som visar titel, navigeringsknapp och åtgärder. Den får automatiskt rätt höjd på 56dp och tar hänsyn till SafeArea för enheter med notch. I AppBar kan en TabBar bäddas in för att växla mellan flikar med hjälp av egenskapen bottom.

Drawer — sidomeny

Drawer — en panel som kommer ut från vänster och ger navigering genom appens sektioner. Scaffold lägger automatiskt till hamburgerikonen i AppBar om egenskapen drawer är inställd. Drawer kan innehålla DrawerHeader, ListView med menyalternativ och användarinformation.

BottomNavigationBar — nedre navigering

BottomNavigationBar — panelen längst ner på skärmen för att växla mellan huvudsektioner. Den innehåller 2 till 5 ikoner med etiketter och stödjer Material 3 med aktiv indikation via NavigationBar. Scaffold placerar den längst ner på skärmen och flyttar automatiskt body uppåt så att innehållet inte täcks.

FloatingActionButton — flytande knapp

FloatingActionButton — en rund knapp placerad i nedre högra hörnet av skärmen. Den används för huvudåtgärden på skärmen, till exempel att lägga till en ny post eller skicka ett meddelande. Scaffold stödjer flera FABs med utökad animation via extended-egenskaper.

Body — huvudinnehåll

Body — det centrala området på skärmen där huvudinnehållet placeras. Som body kan vilken widget som helst tjäna: Column, ListView, GridView, Stack eller en anpassad komposition. Scaffold beräknar automatiskt höjden på body med hänsyn till AppBar, BottomNavigationBar och SafeArea, vilket eliminerar behovet av manuell storleksjustering.

Huvudegenskaper för Scaffold

Scaffold erbjuder över 30 egenskaper för att konfigurera skärmens utseende och beteende. Bland dessa finns både obligatoriska (body) och valfria egenskaper som hanterar marginaler, bakgrund och tangentbordsstatus. Att förstå varje egenskap hjälper till att precisa anpassa gränssnittet enligt designkraven.

Egenskapen resizeToAvoidBottomInset är särskilt viktig vid arbete med formulär: när den är inställd på true (standard), komprimerar Scaffold automatiskt body när tangentbordet visas så att inmatningsfältet förblir synligt. Detta eliminerar behovet av att skriva anpassade tangentbordslyssnare. För anpassade scenarier med SingleChildScrollView kan egenskapen inaktiveras.

Exempel på användning av Scaffold i en app

Låt oss titta på ett praktiskt exempel på Scaffold med en fullständig uppsättning Material-komponenter. Koden skapar en skärm med AppBar, Drawer, BottomNavigationBar, FloatingActionButton och SnackBar — en typisk struktur för en mobilapp i Flutter.

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Min App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Meny')),
            ListTile(title: const Text('Inställningar'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Åtgärd slutförd')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

I exemplet används NavigationBar från Material 3 istället för den föråldrade BottomNavigationBar. Scaffold kopplar automatiskt ihop alla delar: när Drawer öppnas döljs SnackBar, när flikar växlas uppdateras body, och FloatingActionButton förblir på sin plats. ScaffoldMessenger garanterar visning av SnackBar även med flera Scaffold i hierarkin.

Scaffold och Material 3: konfigurationsfunktioner

Material 3 (M3) — är utvecklingen av Material Design, presenterad av Google 2023. Scaffold i M3 fick en rad förändringar: ny NavigationBar-widget istället för BottomNavigationBar, stöd för Dynamic Color via ColorScheme.fromSeed och uppdaterade rekommendationer för marginaler och komponenthöjder. Övergång till M3 kräver inte byte av Scaffold — det räcker att uppdatera appens tema.

För att aktivera Material 3 i projektet måste du ställa in useMaterial3: true i ThemeData. Scaffold anpassar automatiskt det visuella utseendet: marginalerna blir större (24dp istället för 16dp), färger omberäknas från seed-färgen och FloatingActionButton får större dimensioner med rundade hörn. Samtidigt förblir alla befintliga egenskaper hos Scaffold funktionella.

Enligt Material Design 3 Specification (2026) rekommenderas att använda NavigationBar med tre till fem punkter istället för BottomNavigationBar. Scaffold stödjer båda varianterna, men NavigationBar ger bättre stöd för anpassningsförmåga och Material You på Pixel-enheter.

Konfigurera Scaffold för Material 3

För korrekt funktion av Scaffold med M3 räcker det att uppdatera temat och ersätta BottomNavigationBar med NavigationBar. Färger kommer automatiskt att beräknas via ColorScheme.fromSeed, och Scaffold kommer att justera marginalerna till nya standarder. Vid behov kan du direkt åsidosätta backgroundColor.