Πώς να ορίσετε το χρώμα φόντου για τη στήλη Flutter

Σε αυτήν την ανάρτηση ιστολογίου, συζητάμε κάτι που πολλοί από εμάς θεωρούμε δεδομένο, ορίζοντας το χρώμα φόντου μιας στήλης σε Flutter. Αν και το γραφικό στοιχείο Στήλη δεν έχει άμεση ιδιότητα για αυτό, υπάρχουν λύσεις που θα σας βοηθήσουν να επιτύχετε την επιθυμητή εμφάνιση.

Το γραφικό στοιχείο στήλης και οι περιορισμοί του

Το γραφικό στοιχείο Στήλη στο Flutter είναι τέλειο για κάθετη ευθυγράμμιση των θυγατρικών γραφικών στοιχείων. Ωστόσο, θα παρατηρήσετε ότι το ίδιο το γραφικό στοιχείο Στήλη δεν έχει ιδιότητα χρώματος. Λοιπόν, τι μπορούμε να κάνουμε? Ας εξερευνήσουμε.

Τυλίξτε με δοχείο

Η απλούστερη προσέγγιση για να ορίσετε ένα χρώμα φόντου για ολόκληρη τη στήλη σας είναι να το τυλίξετε με ένα Container widget και στη συνέχεια χρησιμοποιήστε το color ιδιοκτησία.

Container(
  color: Colors.blue,
  child: Column(
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Text('First child'),
      Text('Second child'),
    ],
  ),
)

Εδώ, το Container λειτουργεί ως φόντο για τη Στήλη και έχουμε ορίσει το χρώμα της σε μπλε.

Ακολουθεί ο πλήρης κωδικός για αναφορά.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text(
          'Flutter Example',
        ),
      ),
      body: Container(
        color: Colors.blue,
        child: const Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text('First child'),
            Text('Second child'),
          ],
        ),
      ),
    );
  }
}

Η προσθήκη ενός χρώματος φόντου σε μια στήλη Flutter μπορεί να μην είναι απλή, αλλά με προσεγγίσεις όπως η χρήση α Containerμπορείτε εύκολα να πετύχετε την εμφάνιση που θέλετε.