我有這個 JSON 檔案

{
    "app_background_color":"#000000
",
    "app_logo":"https://www.website.nl/images/app-logo.png",
    "app_endpoint":"https://app.website.nl/endpoint",
    "app_text_color":"#FFFFFF
",
    "app_text_font":"Arial",
    "app_text_size":"14px",
}

我的問題是如何將“app_text_color”作為檔案中的變數匯入style.json并使用 json 檔案中變數的顏色并將其用于app.dart下面的檔案？

app.dart

TextFormField(
              decoration: const InputDecoration(
              labelText: 'Test',
              labelStyle: TextStyle(
                 color: Colors.app_text_color)), ///variable from json file
              
                        ),

uj5u.com熱心網友回復：

你也許可以ThemeData在你之前準備好runApp。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  ThemeData themeData = await initializeThemeData();
  runApp(MyApp(themeData: themeData));
}

完整示例

有沒有辦法使用 json 格式來配置樣式并將變數用作 Flutter 應用程式的主題？

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

Future<ThemeData> initializeThemeData() async {
  String jsonData = await rootBundle.loadString('assets/styles.json');
  Map<String, dynamic> data = jsonDecode(jsonData);
  return ThemeData(
    scaffoldBackgroundColor:
        Color(int.parse(data['scaffold_background_color'])),
    appBarTheme: AppBarTheme(
      color: Color(int.parse(data['primary_color'])),
    ),
    textTheme: TextTheme(
      bodyText2: TextStyle(
        fontSize: 24,
        color: Color(int.parse(data['text_color'])),
      ),
    ),
  );
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  ThemeData themeData = await initializeThemeData();
  runApp(MyApp(themeData: themeData));
}

class MyApp extends StatelessWidget {
  final ThemeData? themeData;
  const MyApp({Key? key, this.themeData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: themeData ?? ThemeData.dark(),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(Icons.directions_boat),
        title: const Text("My Awasome App"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text('Hello, FDjawid', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            Text("How's the weather in Flevoland?"),
          ],
        ),
      ),
    );
  }
}

{
  "scaffold_background_color": "0xFF018A2C",
  "app_bar_color": "0xFFFFFFFF",
  "primary_color": "0xFF0645B1",
  "text_color": "0xFFFCDE02"
}

uj5u.com熱心網友回復：

您可以為 JSON 創建模型類，然后轉換 JSON。一旦你有了模型類的物件，你就可以在應用程式的任何地方訪問它。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431211.html

標籤：json 扑镖

上一篇：決議似乎格式不正確的json

下一篇：在PowerShell中按時間戳過濾JSON

有沒有辦法使用json格式來配置樣式并將變數用作Flutter應用程式的主題？

完整示例