Flutter – мощный кроссплатформенный фреймворк, известный прежде всего разработкой мобильных приложений. Однако благодаря богатому набору виджетов и поддержке веб-разработки Flutter также можно использовать для создания локальных веб-сайтов. В этой статье мы рассмотрим различные методы создания локального веб-сайта с использованием Flutter, а также примеры кода.

Метод 1: базовый HTML и CSS
Flutter позволяет встраивать HTML-контент в виджет WebView, что позволяет вам создать локальный веб-сайт с использованием базового HTML и CSS. Вот пример:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class LocalWebsite extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'asset:///assets/index.html',
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

Метод 2: Flutter Web
Flutter также обеспечивает полноценную веб-поддержку, позволяя создавать локальные веб-сайты с использованием парадигмы декларативного пользовательского интерфейса Flutter. Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(LocalWebsite());
}
class LocalWebsite extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello, Local Website!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Метод 3: Flutter для Интернета с внешними данными
Вы также можете получать и отображать данные из внешних источников, таких как API, на своем локальном веб-сайте Flutter. Вот пример использования пакета http:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
  runApp(LocalWebsite());
}
class LocalWebsite extends StatefulWidget {
  @override
  _LocalWebsiteState createState() => _LocalWebsiteState();
}
class _LocalWebsiteState extends State<LocalWebsite> {
  String data = '';
  @override
  void initState() {
    super.initState();
    fetchData();
  }
  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      setState(() {
        data = response.body;
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            data.isNotEmpty ? data : 'Loading...',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

В этой статье мы рассмотрели несколько методов создания локального веб-сайта с помощью Flutter. Вы можете выбрать базовый HTML и CSS в виджете WebView, использовать веб-поддержку Flutter или даже включить внешние данные на свой локальный веб-сайт. Универсальность Flutter позволяет плавно перейти от мобильной разработки к веб-разработке, что делает его отличным выбором для создания локальных веб-сайтов.

Используя обсуждаемые методы, вы можете использовать возможности Flutter и создавать впечатляющие локальные веб-сайты, адаптированные к вашим конкретным потребностям.