Как вызвать раскладки в флаттере?

Question

Я новичок во флаттере.

У меня вопрос

Как вызывать макеты во флаттере?

Я создал несколько макетов, которые содержат многовиджета.Это неправильно, если я создаю каждый код внутри 1 файла.поэтому я решил поместить код для виджетов в каждый файл макетов 1.

, и я не знаю, как вызвать их в создаваемом мной home-page.dart.

Я имею в виду,если я нажимаю ЭТО (то есть page1.dart), то появляется page1.dart.думал, что файл (page1.dart) находится в другом каталоге (не внутри lib dir).

Я не знаю.я должен использовать МАРШРУТЫ?но я не знаю, как.

Вы бы хотели научить меня?

..............

вот.У меня есть такой TabBar в моей home_page.dart:

import 'package:flutter/material.dart';
import 'package:coba/second.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      title: "MySampleApplication",
        home: new DefaultTabController(
          length: 3,
          child: new Scaffold( 
            appBar: new AppBar(
              title: new Text("Hello Flutter App"), 
              bottom: new TabBar(                 
                tabs: <Widget>[
                  new Tab(text: "First Tab"),
                  new Tab(text: "Second Tab"),
                  new Tab(text: "Third Tab"),
                ],
              ),
            ),
            body: new TabBarView( 
                children: <Widget>[
                   new Text("You've Selected First"),
                   new SecondWidget(),
                   new ThirdWidget(),
                ]
            )
          ),
        )
    );
  }
}
class SecondWidget extends StatelessWidget {   
  @override
  Widget build(BuildContext context) {
    Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) =>
              second(data: 'Hello there from the first page!'),
        ),
  }
}

class ThirdWidget extends StatelessWidget { 
  @override
  Widget build(BuildContext ctxt) {
    return new Column(
      children: <Widget>[
        Text('halooo'),
        Container(
          color: Colors.black,
          width: 200,
          height: 200,
        )
      ],
    );
  }
}

большое спасибо

Answer 1

Вы можете использовать любое имя, какое захотите (как правило, мы видели xxxScreen.dart или xxxPage.dart, но это полностью ваше дело).

Импортируйте свою страницу «судьба», используя страницу «происхождение», используя import:

    import 'package:myproject/myPageScreen.dart';

Флаттер предлагает 3 варианта:

1. Использование Навигатор :

    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) =>
          SecondPage(data: 'Hello there from the first page!'),
    ),

Используя Именованные маршруты:

Объявите свои маршруты в MaterialApp:

MaterialApp(
  // Start the app with the "/" named route. In our case, the app will start
  // on the FirstScreen Widget
  initialRoute: '/',
  routes: {
    // When we navigate to the "/" route, build the FirstScreen Widget
    '/': (context) => FirstScreen(),
    // When we navigate to the "/second" route, build the SecondScreen Widget
    '/second': (context) => SecondScreen(),
  },
);

И затем используйте именованный маршрут с Навигатором:

onPressed: () {
  Navigator.pushNamed(context, '/second');
}

Использование onGenerateRoute:

Объявите это свойство на вашем MaterialApp:

    return MaterialApp(
      // Initially display FirstPage
      initialRoute: '/',
      onGenerateRoute: _getRoute,
    );

И создайте генератор маршрутов :

    final args = settings.arguments;
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => 
          FirstPage());
      case '/second':
        // Validation of correct data type
        if (args is String) {
           return MaterialPageRoute(
           builder: (_) => SecondPage(
           data: args,
        ),
      );
    }

Вы можете создать свой маршрутизатор в качестве другого файла, который поможет организовать ваш проект.